• 中文
    • English
  • 注册
    • 查看作者
    • ElementUi框架解决el-select选择器(下载框)同时加载很多数据时卡顿问题

      导读:

      本文分享的方法是比较笨的,会牺牲掉很多的数据,比如说原本有1000条数据,但用了本文方法后,下拉框最多只能显示您所设置的50条数据。如果你想滚动显示全部的数据,请参考我的另一篇文章 https://www.37boke.com/archives/187.html

      html部分代码:

      <div class="layui-form-item" style="display:flex;">
      	<label class="col-md-2" style="text-align:right;">选择物品</label>
      	<div class="col-md-7">
                  <el-select
      		   v-model="itemid"
      		   filterable
      		   :filter-method="itemFilter"
      		   clearable placeholder="请选择">
      	        <el-option
      			   v-for="item in itemList"
      			   :key="item.id"
      			   :label="item.name"
      			   :value="item.id"></el-option>
                  </el-select>
      	</div>
      </div>

      js部分代码:

      <script type="text/javascript">
      var demo = new Vue({
      	el: '#demo',
      	data: function() {
      		return {
      			allItemList: [],
      			itemList: [], 
      			itemid: 0,
      		}
      	},
      	/*初始化*/
      	created: function() {
      		//添加到数组里(说明:$itemList是PHP后台的数组集合)
      		this.allItemList = this.allItemList.concat({:json_encode($itemList)});
      		this.itemFilter();
      		//默认显示第一个
      		this.itemid = this.itemList[0].id;
      	},
      	methods: {
      		search(){
      			var that = this;	
      			$.post("后端控制器搜索地址",{"name":that.name}, function (res) {
      				if(res.code==1){
      					//添加到数组里
      					that.allItemList = res.data;
      					//过滤
      					that.itemFilter();
      					//默认显示第一个
      					that.itemid = that.itemList[0].id;			
      				}else{
      					toastr.error(res.msg);
      				}
      			});
      		},
      		itemFilter(query = '') {
      		  let arr = this.allItemList.filter((item) => {
      			return item.name.includes(query) || item.id.includes(query)
      		  })
      		  //如果数据总条数超过50
      		  if (arr.length > 50) {
      		        //截取前50条数据,我们只让下拉框最多显示50条内容
      			this.itemList = arr.slice(0, 50)
      		  } else {
      			this.itemList = arr
      		  }
      		},
      	}
      });
      </script>

    • 0
    • 0
    • 0
    • 189
    • 请登录之后再进行评论

      登录
    • 返回顶部
    • 做任务
    • 实时动态
    • 偏好设置
    • 到底部
    • 单栏布局 侧栏位置: