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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
对于el-select远程搜索分页功能,你可以通过以下步骤来实现: 1. 在el-select组件中添加一个远程搜索的方法,该方法需要接收一个参数query,表示搜索关键字,同时需要返回一个Promise对象,该对象需要返回一个包含搜索结果的数组。 2. 在el-select组件中添加一个分页方法,该方法需要接收两个参数:page和pageSize,分别表示当前页码和每页显示的条目数,同时需要返回一个Promise对象,该对象需要返回一个包含分页数据的数组。 3. 在el-select组件中添加一个选项属性:remote。如果remote属性为true,则表示启用远程搜索分页功能。 4. 在el-select组件中设置一个选项属性:remote-method。该属性需要绑定远程搜索分页方法。例如: ```html <el-select v-model="value" remote :remote-method="remoteMethod"></el-select> ``` 5. 在远程搜索分页方法中,根据传入的参数进行搜索分页,并返回符合条件的数据。例如: ```javascript remoteMethod(query) { return new Promise((resolve, reject) => { // 发送远程搜索请求,返回符合条件的数据 // resolve(data) }) }, paginate(page, pageSize) { return new Promise((resolve, reject) => { // 发送分页请求,返回当前页的数据 // resolve(data) }) } ``` 这样,当用户输入关键字时,el-select组件会自动调用远程搜索方法进行搜索,并显示符合条件的数据。当用户滚动到列表底部时,el-select组件会自动调用分页方法加载更多数据。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值