- 问题来源及发生场景: 正常使用elm组件库的secect选择器组件时;对应的下拉选项的options数组都是由后端返回的数据;此时如果该数据是成千上万条的时候;select组件会因为加载数据显得异常的卡顿,甚至会引发整体页面的卡顿.那么此时用户体验感极差.所以得动手优化下,毕竟咱们是专业的前端不是.一切追求极致…扯远了.废话不多说,先上效果图.
- 效果图: (说明:可以看到实际请求数据是返回了近7000条数据;此时如果不处理,那么页面绝对是卡顿的;所以我们这边对数据进行了处理,可以看到,处理后的select首屏只展示了200条数据;检索却可以检索所有的数据.这就很好地解决了以上的问题)
- 关键代码:
<el-form-item label="客户登录账号:" prop="customLoginId">
<el-select
v-model="ruleForm.customLoginId"
placeholder="请选择客户登录账号"
:filter-method="filterLoginIdList"
@clear="clearList"
clearable
filterable
>
<el-option
v-for="item in loginIdListTop200"
:key="item.customLoginId"
:label="item.customLoginName"
:value="item.customLoginId"
>
</el-option>
</el-select>
</el-form-item>
getLoginIdList(val) {
//获得用户登录列表
let data = new URLSearchParams();
API.getLoginIdList(data)
.then((res) => {
if (res.code == 200) {
this.loginIdList = res.data;
this.loginIdListTop200 = res.data.slice(0, 200); //取前两百条展示
}
})
.catch((err) => {});
},
filterLoginIdList(query = "") { //自定义的筛选出所输入值所匹配出的集合
let arr = this.loginIdList.filter((item) => {
return item.customLoginName.includes(query);
});
if (arr.length > 200) {
this.loginIdListTop200 = arr.slice(0, 200);
} else {
this.loginIdListTop200 = arr;
}
},
clearList() {
//点击清空登录用户时操作
this.getLoginIdList("");
},
- 代码处理思路:
4-1: 先通过getLoginIdList函数向后台请求拿到所有的数据,存入数组中;并用另一数组拿到截取用于secect组件首屏展示的200条数据.
4-2:通过select组件的filter-method方法自定义搜索方法筛选出所输入值所匹配出的集合.elm官网API链接 4-3:清空按钮时重新请求getLoginIdList拿到数据(不做这一步的话,会导致select检索输入后无法还原前200条数据的情况,可自行尝试). - 当然,如果此时场景有类似编辑(修改)的时候;那么如果此时的id不在前200条里,那么此时该select的赋值就会只显示id,而不显示该id对应的name了(类似下面):
5-1:赋值处理前:
5-2:赋值处理后:
6.第5步的处理代码也很简单.(主体思路就是拿个变量存储到编辑时赋值的对应的那个id所在的数组;然后将它加入前200数组集合中即可).
代码展示:
if(this.params.customLoginId){ //把编辑的那条数据拿到整合到前200条的数组中,这样确保编辑时能对应显示(否则,编辑的id不在前200时,只显示id不显示对应名称)
this.curEditArr = this.loginIdList.filter(i => {return i.customLoginId == this.params.customLoginId})
}else{
this.curEditArr = []
}
this.loginIdListTop200 = res.data.slice(0, 200).concat(this.curEditArr); //取前两百条展示
- 整合后的完整代码如下:
<el-form-item label="客户登录账号:" prop="customLoginId">
<el-select
v-model="ruleForm.customLoginId"
placeholder="请选择客户登录账号"
:filter-method="filterLoginIdList"
@clear="clearList"
clearable
filterable
>
<el-option
v-for="item in loginIdListTop200"
:key="item.customLoginId"
:label="item.customLoginName"
:value="item.customLoginId"
>
</el-option>
</el-select>
</el-form-item>
getLoginIdList(val) {
//获得用户登录列表
let data = new URLSearchParams();
API.getLoginIdList(data)
.then((res) => {
if (res.code == 200) {
this.loginIdList = res.data;
this.curEditArr = []
if(this.params.customLoginId){ //把编辑的那条数据拿到整合到前200条的数组中,这样确保编辑时能对应显示(否则,编辑的id不在前200时,只显示id不显示对应名称)
this.curEditArr = this.loginIdList.filter(i => {return i.customLoginId == this.params.customLoginId})
}else{
this.curEditArr = []
}
this.loginIdListTop200 = res.data.slice(0, 200).concat(this.curEditArr); //取前两百条展示
}
})
.catch((err) => {});
},
filterLoginIdList(query = "") { //自定义的筛选出所输入值所匹配出的集合
let arr = this.loginIdList.filter((item) => {
return item.customLoginName.includes(query);
});
if (arr.length > 200) {
this.loginIdListTop200 = arr.slice(0, 200);
} else {
this.loginIdListTop200 = arr;
}
},
clearList() {
//点击清空登录用户时操作
this.getLoginIdList("");
},
- 大功告成.更多详情还请需要的同学自行尝试.大佬勿喷,码字不易.还请多多支持.多多三连