标签: Vue element-ui
原因:下拉框数据过多,若渲染全部数据,会导致 DOM 数量太多,操作卡顿。
解决办法:将获取的数据(allList)和渲染数据(list)分离开,限制渲染数组的长度。
<template>
<el-select v-model="value" filterable :filter-method="filterList" placeholder="请选择">
<el-option
v-for="item in allList"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
// 渲染列表,限制在20个以内
list: [],
// 请求获取的列表,数据量过大时不能直接渲染,会卡顿
allList: [
{
value: "选项1",
label: "黄金糕"
},
{
value: "选项2",
label: "双皮奶"
},
{
value: "选项3",
label: "蚵仔煎"
},
{
value: "选项4",
label: "龙须面"
},
{
value: "选项5",
label: "北京烤鸭"
}
],
value: ""
};
},
created() {
// 模拟某些情况,需要设置默认的下拉选项,防止默认选中值显示不正常(例如:不显示label,而显示value)
this.list = [{
value: "选项4",
label: "龙须面"
},
{
value: "选项5",
label: "北京烤鸭"
}]
},
methods: {
filterList(query = "") {
let arr = this.allList.filter(item => {
return item.label.includes(query) || item.value.includes(query);
});
if (arr.length > 20) {
this.list = arr.slice(0, 20);
} else {
this.list = arr;
}
}
}
};
</script>
网友评论