el-select 远程分页搜索(可搜关键字)

前端页面卡死了...

一脸懵,什么情况,数据也没有那么大,怎么会卡死呢?先看看这次改了什么,嗯~数据加解密,前端拿到所有数据并进行解密,额~数据加载时间好长~

嗯 做数据分页吧,滚动加载数据:

<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://www.uudwc.com/A/jrgjY/

原文地址:https://blog.csdn.net/NancyFyn/article/details/132812764

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请联系站长进行投诉反馈,一经查实,立即删除!

上一篇2023年09月15日 00:29
下一篇 2023年09月15日 00:30