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

你可能感兴趣的:(vue.js,前端,javascript)