前端页面卡死了...
一脸懵,什么情况,数据也没有那么大,怎么会卡死呢?先看看这次改了什么,嗯~数据加解密,前端拿到所有数据并进行解密,额~数据加载时间好长~
嗯 做数据分页吧,滚动加载数据:
- <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)
- )
- },