前端页面卡死了...
一脸懵,什么情况,数据也没有那么大,怎么会卡死呢?先看看这次改了什么,嗯~数据加解密,前端拿到所有数据并进行解密,额~数据加载时间好长~
嗯 做数据分页吧,滚动加载数据:文章来源:https://uudwc.com/A/jrgjY
<el-select v-model="ruleForm.tag" filterable placeholder="请选择标签名称" size="small" remote v-scroll="val => handleScroll(val,)" :remote-method="searchRemote" @focus="focusValue">
<el-option v-for="item in labelList" :key="item.fieldName" :value="item.fieldName" :label="item.name"></el-option>
</el-select>
total: 0, // 总条数
pageNo: 1, // 页码
keyWord: null, // 关键字
/**
* 远程搜索
*/
searchRemote(query) {
this.keyWord = query;
this.pageNo = 1;
this.businessOwnerOption = [];
this.getBusinessOwnerOption();
},
/**
* 滚动加载
*/
handleScroll(val) {
if (val) {
if (this.businessOwnerOption.length === this.total) {
return;
}
this.pageNo += 1;
this.getBusinessOwnerOption();
}
},
/**
* 聚焦
*/
focusValue() {
this.pageNo = 1;
this.keyWord = '';
this.getBusinessOwnerOption();
},
getBusinessOwnerOption() {
this.businessOwnerLoading = true;
const params = {
search: this.keyWord || '', // 关键字
current: this.pageNo, // 当前页数
size: 10 // 条数
};
Api.getBusinessOwnerOption(params).then(res => {
if (res.success) {
const {result, totalCount } = res.data
if (!isEmpty(result)) {
// 这里要先对返回的数据进行解密,不然concat数据会有问题
result && result.forEach(element => {
element.email = decryptFn(element.email)
element.nickName = decryptFn(element.nickName)
});
this.businessOwnerOption = uniqBy(this.businessOwnerOption.concat(result), 'email');
this.total = totalCount;
}
}
})
.catch( error =>
console.error(error)
)
},
文章来源地址https://uudwc.com/A/jrgjY