解决Element-ui中select下拉框因数据量大导致页面渲染慢、卡顿的问题
直接上代码：1、写一个防抖的工具函数
tools.js
// 防抖
export const _debounce = (fn, delay = 300) => {
var timer = null;
return function () {
var _this = this;
var args = arguments;
if (timer) clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(_this, args);
}, delay);
};
}2、下拉框的options数据源
citys.js(这里只写一少部分)
export default [
{value: 110100, name: "北京市"},
{value: 120100, name: "天津市"},
{value: 130100, name: "石家庄市"},
{value: 130200, name: "唐山市"},
{value: 130300, name: "秦皇岛市"},
{value: 130400, name: "邯郸市"},
{value: 130500, name: "邢台市"},
{value: 130600, name: "保定市"},
{value: 130700, name: "张家口市"},
{value: 130800, name: "承德市"},
{value: 130900, name: "沧州市"},
{value: 131000, name: "廊坊市"},
{value: 131100, name: "衡水市"},
{value: 140100, name: "太原市"},
......
]3、业务代码
index.vue
<template>
<el-form :inline="true" :model="dataForm" size="small" >
<el-form-item>
<el-select v-model="dataForm.cityCode" filterable :filter-method="filterMethod"
v-el-select-loadmore="loadMore(rangeNumber)" @visible-change="visibleChange" placeholder="城市" clearable>
<el-option :key="item.name + '' + i" :label="item.name" :value="item.value"
v-for="(item, i) in citysList.slice(0, rangeNumber)"></el-option>
</el-select>
</el-form-item>
</el-form>
</template>4、效果
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]