关于element-ui:elselect-filterable为true情况下大数据量卡顿问题处理

3次阅读

共计 980 个字符，预计需要花费 3 分钟才能阅读完成。

7 千条数据，搜寻卡顿

<el-select v-model="query.enterpriseId" filterable :filter-method="enterpriseSearchF" placeholder="请抉择企业名称" clearable>
  <el-option v-for="item in conInputShowList" :key="item.id" :label="item.companyName" :value="item.id" :disabled="item.disabled">
  </el-option>
</el-select>

data() {
  return {conInputShowList: [], // 显示的数据
    conInputList: [], // 原始接口数据}
},

// 自定义搜寻条件
enterpriseSearchF(val) {
  const moreVal = '输出更具体的条件查问更多数据';
  const maxNum = 100; // 超出量，超出只显示此量的数据。const key = 'companyName'; // 数据 key，须要搜寻的字段
  if (val) { //val 存在
    this.conInputShowList = this.conInputList.filter((item) => {if (item[key].indexOf(val) > -1) {return true}
    })
    if (this.conInputShowList.length > maxNum) {this.conInputShowList = this.conInputShowList.slice(0, maxNum);
      const temp = {disabled: true}
      temp[key] = moreVal;
      this.conInputShowList.push(temp);
    }
  } else {this.conInputShowList = this.conInputList.slice(0, maxNum);
    const temp = {disabled: true}
    temp[key] = moreVal;
    this.conInputShowList.push(temp);
  }
  const allTemp = {id: null}
  allTemp[key] = '全副';
  this.conInputShowList.unshift(allTemp);
},

正文完