解决el-select数据量过大导致卡顿渲染慢的问题

el-select 组件通常在后台管理系统中用到最多，如果 select 的选项下拉框的数据量是 1w+的话，那么页面直接卡住了，杯具了。思考了一下，如果接口支持搜索和分页，那直接通过上拉加载就可以了。但后端童学不太愿意改😄。行吧，其实前端搞也是可以的。

三种解决方案

通过一顿搜索查资料加联想总结了 3 种解决方法，总有一款适合你。当然，以下方法都需要支持开启filterable支持搜索。

方案一(青铜段位) ：filterMethod 直接过滤数据量

<template>
    <el-select 
      v-model="value" 
      clearable filterable 
      :filter-method="filterMethod">
      <el-option
        v-for="(item, index) in options.slice(0, 100)"
        :key="index"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
 </template>
 export default {
  name: 'Demo',
  data() {
    return {
      options: [],
      value: ''
    }
  },
  beforeMount() {
    this.getList();
  },
  methods: {
    // 模拟获取大量数据
    getList() {
      for (let i = 0; i < 25000; i++) {
        this.options.push({label: "选择"+i,value:"选择"+i});
      } 
    },
    filterMethod(val) {
      console.log('filterMethod', val);
      this.options = this.options.filter(item => item.value.indexOf(val) > -1).slice(0, 100);
    },
    visibleChange() {
      console.log('visibleChange');
    }
  }
}

方案二(白银段位) 自定义滚动指令，实现翻页加载

写自定义滚动指令，options列表滚动到底部后，再加载下一页。但这时候筛选出来的是已经滚动出来的值。

这里如果直接使用filterable来搜索，搜索出来的内容是已经滑动出来的内容。如果想筛选全部的，就需要重写filterMethod方法来自定义过滤功能。可以根据情况选择是否要重写filterMethod。

<template>
  <div class="dashboard-editor-container">
    <el-select 
      v-model="value" 
      clearable
      filterable 
      v-el-select-loadmore="loadMore"
      :filter-method="filterMethod">
      <el-option
        v-for="(item, index) in options"
        :key="index"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  name: 'Demo',
  data() {
    return {
      options: [],
      value: '',
      pageNo: 0
    }
  },
  beforeMount() {
    this.getList();
  },
  methods: {
    // 模拟获取大量数据
    getList() {
      const data = [];
      for (let i = 0; i < 25000; i++) {
        data.push({label: "选择"+i,value:"选择"+i});
      }
      this.allData = data;
      this.data = data;
      this.getPageList()
    },
    getPageList(pageSize = 10) {
      this.pageNo++;
      const list = this.data.slice(0, pageSize * (this.pageNo));
      this.options = list;
    },
    loadMore() {
      this.getPageList();
    },
    filterMethod(val) {
      this.data = val ? this.allData.filter(item => item.label.indexOf(val) > -1) : this.allData;
      this.getPageList();
    }
  },
  directives:{
    'el-select-loadmore':(el, binding) => {
      // 获取 element-ui 定义好的 scroll 父元素
      const wrapEl = el.querySelector(".el-select-dropdown .el-select-dropdown__wrap");
      if(wrapEl){
        wrapEl.addEventListener("scroll", function () {
          /**
           * scrollHeight 获取元素内容高度(只读)
           * scrollTop 获取或者设置元素的偏移值,
           *  常用于:计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的 scrollTop 的值默认为 0.
           * clientHeight 读取元素的可见高度(只读)
           * 如果元素滚动到底, 下面等式返回 true, 没有则返回 false:
           * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
           */
          if (this.scrollTop + this.clientHeight >= this.scrollHeight) {
            // binding 的 value 就是绑定的 loadmore 函数
            binding.value();
          }
        });
      }
    },
  },
}
</script>

方案三(黄金段位) 虚拟列表

引入社区的 vue-virtual-scroll-list 支持虚拟列表。但这里想的自己再实现一遍虚拟列表，后续再写吧。

另外，element-plus 提供了对应的实现，如果是使用的是 plus，则可以直接使用 select-v2 组件。

<template>
  <div class="dashboard-editor-container">
    <el-select 
      v-model="value" 
      clearable
      filterable >
      <virtual-list
          class="list"
          style="height: 360px; overflow-y: auto;"
          :data-key="'value'"
          :data-sources="data"
          :data-component="item"
          :estimate-size="50"
        />
    </el-select>
  </div>
</template>
<script>
import VirtualList from 'vue-virtual-scroll-list';
import Item from './item';
export default {
  name: 'Demo',
  components: {VirtualList, Item},
  data() {
    return {
      options: [],
      data: [],
      value: '',
      pageNo: 0,
      item: Item,
    }
  },
  beforeMount() {
    this.getList();
  },
  methods: {
    // 模拟获取大量数据
    getList() {
      const data = [];
      for (let i = 0; i < 25000; i++) {
        data.push({label: "选择"+i,value:"选择"+i});
      }
      this.allData = data;
      this.data = data;
      this.getPageList()
    },
    getPageList(pageSize = 10) {
      this.pageNo++;
      const list = this.data.slice(0, pageSize * (this.pageNo));
      this.options = list;
    },
    loadMore() {
      this.getPageList();
    }
  }
}
</script>

// item 组件
<template>
    <el-option :label="source.label" :value="source.value"></el-option>
</template>
  
  <script>
  export default {
    name: 'item',
    props: {
      source: {
        type: Object,
        default() {
          return {}
        }
      }
    }
  }
  </script>