解决Element-ui中select下拉框因数据量大导致页面渲染慢、卡顿的问题

直接上代码：
1、写一个防抖的工具函数

tools.js

1. // 防抖
2. export const _debounce = (fn, delay = 300) => {
3.   var timer = null;
4.   return function () {
5.     var _this = this;
6.     var args = arguments;
7.     if (timer) clearTimeout(timer);
8.     timer = setTimeout(function () {
9.       fn.apply(_this, args);
10.     }, delay);
11.   };
12. }

复制代码

2、下拉框的options数据源

citys.js(这里只写一少部分)

1. export default [
2.     {value: 110100, name: "北京市"},
3.     {value: 120100, name: "天津市"},
4.     {value: 130100, name: "石家庄市"},
5.     {value: 130200, name: "唐山市"},
6.     {value: 130300, name: "秦皇岛市"},
7.     {value: 130400, name: "邯郸市"},
8.     {value: 130500, name: "邢台市"},
9.     {value: 130600, name: "保定市"},
10.     {value: 130700, name: "张家口市"},
11.     {value: 130800, name: "承德市"},
12.     {value: 130900, name: "沧州市"},
13.     {value: 131000, name: "廊坊市"},
14.     {value: 131100, name: "衡水市"},
15.     {value: 140100, name: "太原市"},
16.     ......
17. ]

复制代码

3、业务代码

index.vue

1. <template>
2.   
3.     <el-form :inline="true" :model="dataForm" size="small" >
4.       <el-form-item>
5.         <el-select v-model="dataForm.cityCode" filterable :filter-method="filterMethod"
6.           v-el-select-loadmore="loadMore(rangeNumber)" @visible-change="visibleChange" placeholder="城市" clearable>
7.           <el-option :key="item.name + '' + i" :label="item.name" :value="item.value"
8.             v-for="(item, i) in citysList.slice(0, rangeNumber)"></el-option>
9.         </el-select>
10.       </el-form-item>
11.     </el-form>
12.   
13. </template>

复制代码

4、效果

      

        

 

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！