el-select的数据太多时候导致卡顿

Posted 2021-09-15 羽梓橙

解决：实现搜索和很多数据的情况下保证平滑查看数据和搜索数据。

<template>
  <div class="content">
    <el-select
      size="small" 
      v-model="searchVal"
      filterable 
      :filter-method=\'fileterMethod\'
      placeholder="请输入搜索内容"
      clearable
      v-loadMoreDir:rangeNumber="loadMoreFun(rangeNumber)"
      @change=\'selChange\'
    >
      <el-option
        v-for="(item, index) in showData.slice(0, rangeNumber)" 
        :key="index"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  name:\'demo\',
  data() {
        return {
           showData: [],//展示在下拉框内的数据
           allData: [],//搜索使用的所有数据
           searchVal: "",
           rangeNumber: 10,
           addNumber:6,//下拉框滚动到底部后新增的条数
        }
    },
    created(){
       this.getList()
    },
    watch: {
      searchVal(newVal,oldVal){
        // 清空输入框后重新给下拉内容赋值
        if(!newVal){
          this.showData = this.allData
        }
      },
    },
    directives:{
      \'loadMoreDir\':{
        bind(el, binding) {
          // 获取element-ui定义好的scroll盒子
          const SELECTWRAP_DOM = el.querySelector(\'.el-select-dropdown .el-select-dropdown__wrap\');
          SELECTWRAP_DOM.addEventListener(\'scroll\', function () {
              /**
              * scrollHeight 获取元素内容高度(只读)
              * scrollTop 获取或者设置元素的偏移值,常用于计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
              * clientHeight 读取元素的可见高度(只读)
              * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
              * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
              */
              const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
              if (condition) binding.value()
          });
        }
      }
    },
    methods: {
      fileterMethod(val){
        this.searchVal = val
        if(val){
          this.showData = this.allData
          this.showData = this.showData.filter(item => {
              if(item.label.includes(val)){
                  return item
              }
          })
        }else{
            this.showData = this.allData
        }
      },
      getList(){
        let arr = []
        for(let i = 0; i < 100000; i++){
            arr.push({
                label: "数据" + i,
                value: "数据" + i
            })
        }
        this.allData = arr
        this.showData = arr
      },
      loadMoreFun(n){
        //每次滚动到底部可以新增条数
        return () => this.rangeNumber += this.addNumber 
      },
      selChange(val){

      },
    }
}
</script>
 
<style lang="scss" scoped>

</style>

注：内容搜索出来的，记录一下。
见地址：https://blog.csdn.net/sunnybo...