关于前端:elselect的数据太多时候导致卡顿

解决：实现搜寻和很多数据的状况下保障平滑查看数据和搜寻数据。

<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…