el-select 远程分页搜索（可搜关键字）

最新推荐文章于 2025-04-25 11:23:35 发布

F N Nancy

最新推荐文章于 2025-04-25 11:23:35 发布

阅读量841

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/NancyFyn/article/details/132812764

前端页面卡死了...

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

嗯做数据分页吧，滚动加载数据：

<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)
      )
    },