对el-select进行二次封装，解决数据量过大造成页面卡顿问题

问题

对于体量相对庞大的公司来说，数据量很多都是数以万计的，对于一些选择组件例如select来说，同时渲染这么庞大的数据往往会导致页面卡顿甚至会直接卡死。

解决思路

页面卡顿的根本原因其实是浏览器渲染的时候数据量过大导致的，我们可以将数据进行分段处理，不需要展示所有，只展示部分数据，等滑到底部再加载更多，这样每次浏览器只需要渲染小部分数据。

难题分析

1. 触底事件触发 既然需要进行分段处理，那么首先就需要一个触发事件，当数据加载完成时获取更多数据进行加载，这里需要的就是一个触底事件。判断元素是否触底的办法有很多，大多都是通过计算元素高度，滚动条高度等计算得到，这种方法不但会有几px的误差，还需要给添加滚动事件实时监听。所以我们采用IntersectionObserver来实现。这个api会在元素出现在页面的时候触发，那么我们只需要在下拉框option元素下面添加一个空的元素，就可以完美做到触底监听。只要这个元素出现在屏幕，就表示触底，就触发IntersectionObserver这个api。
2. 兼容查询方法大多时候这种数据量大的下拉框，我们还会提供前端模糊查询的方式，这个时候我们还需要维护一份模糊查询的数据，以便查询的时候触底加载已查询出来的数据
3. 数据回显当我们需要对下拉框进行编辑操作的时候，会发现当前数据不一定能正常回显，因为我们每次只渲染部分数据，触底加载更多，很有可能需要回显的数据这个时候并没有被渲染。所以我们需要监听当下拉数据获取到值，并且绑定的值也同时存在的时候，那就是需要回显的时候，我们需要手动在所有下拉数据里面找到需要回显的那条，并把它移动到列表第一个，这样当第一次加载就可以回显成功！

实现

<template>
  <el-select
    :value="value"
    :filter-method="selfFilter"
    filterable
    v-bind="$attrs"
    v-on="$listeners"
    ref="elSelectRef"
    @remove-tag="removeTag"
    @change="selectChange"
  >
    <el-option
      v-for="item in showOptions"
      :key="item[selectValue]"
      :value="item[selectValue]"
      :label="item[selectLabel]"
    >el-option>
    <span ref="endOption">span>
  el-select>
template>

<script>
export default {
  name: "MuchSelect",
  npmUp: true,
  props: {
    value: null,
    // 接口拿到的所有数据
    options: {
      type: Array,
      default: () => [],
    },
    // 下拉label
    selectLabel: {
      type: String,
      default: "label",
    },
    // 用例进行存储的字段
    selectValue: {
      type: String,
      default: "value",
    },
    // 第一次展示的条数
    showListNum: {
      type: Number,
      default: 20,
    },
    // 一次加载的条数
    loadListNum: {
      type: Number,
      default: 20,
    },
  },
  data() {
    return {
      // 拷贝出的原生所有数据
      copyOriginalList: [],
      // 下拉渲染的数据
      showOptions: [],
      // 查询出的所有数据
      filterOption: [],
      // 触底元素
      endEle: null,
      // 用来判断是否为初始化观察者，此时不应该执行列表加载方法
      initObserver: true,
      // 观察者
      observer: null,
      // 是否处于查询
      isFilter: false,
    }
  },
  mounted() {
    this.$nextTick(() => {
      // console.log(this.$refs.elSelectRef)
      this.endEle = this.$refs.endOption
      this.createObserver()
    })
  },
  beforeDestroy() {
    this.delObserver()
  },
  computed: {
    curLength() {
      return this.showOptions.length
    },
  },
  methods: {
    // 初始化下拉列表
    initList() {
      this.isFilter = false
      this.filterOption = []
      if (this.value) {
        if (Array.isArray(this.value) && this.value.length > 0) {
          let ids = []
          let optionLength = this.copyOriginalList.length
          for (let index = 0; index < optionLength; index++) {
            const item = this.copyOriginalList[index]
            if (this.value.includes(item[this.selectValue])) {
              ids.push(index)
            }
            if (ids.length === optionLength) {
              break
            }
          }
          ids.forEach((i) => {
            this.copyOriginalList.splice(
              0,
              0,
              this.copyOriginalList.splice(i, 1)[0]
            )
          })
        } else if (["string", "number"].includes(typeof this.val)) {
          let index = this.copyOriginalList.findIndex(
            (item) => item[this.selectValue] === this.value
          )
          if (index >= 0) {
            this.copyOriginalList.splice(
              0,
              0,
              this.copyOriginalList.splice(index, 1)[0]
            )
          }
        }
      }
      this.showOptions = this.copyOriginalList.slice(0, this.showListNum)
    },
    // 创建观察器
    createObserver() {
      this.observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            this.addOption()
          }
        })
      })
      this.observer.observe(this.endEle)
    },
    // 销毁观察者
    delObserver() {
      if (this.observer) {
        this.observer.unobserve(this.endEle)
      }
    },
    selectChange(val) {
      this.$emit("input", val)
    },
    // 重写过滤方法
    selfFilter(val) {
      if (val) {
        this.isFilter = true
      } else {
        this.isFilter = false
        this.showOptions = []
        this.filterOption = []
      }
      // 如果需要使用filterMethod属性自定义搜索，需要返回一个值作为搜索后的结果接收。
      if (typeof this.$attrs.filterMethod === "function") {
        this.filterOption = this.$attrs.filterMethod(val)
      } else {
        // 默认按照输入的文本进行过滤
        this.filterOption = this.copyOriginalList.filter((item) =>
          item[this.selectLabel].includes(val)
        )
      }
      this.showOptions = this.filterOption.slice(0, this.showListNum)
    },
    // 到底部新加数据
    addOption() {
      let listArr = []
      if (this.isFilter) {
        listArr = this.filterOption
      } else {
        listArr = this.copyOriginalList
      }
      if (this.showOptions.length < listArr.length) {
        this.showOptions = this.showOptions.concat(
          listArr.slice(this.curLength, this.curLength + this.loadListNum)
        )
      }
    },
    // 多选模式下的移除操作
    removeTag(val) {
      let oldIndex = this.options.findIndex(
        (item) => item[this.selectValue] === val
      )
      let newIndex = this.copyOriginalList.findIndex(
        (item) => item[this.selectValue] === val
      )
      this.copyOriginalList.splice(
        oldIndex,
        0,
        this.copyOriginalList.splice(newIndex, 1)[0]
      )

      // 注意此刻下拉值并没有被完全删除，打印发现值还是未删除之前的值，删除操作应该是在调用该方法之后执行的
      // 所有使用nextTick将初始化操作放到下个队列里
      this.$nextTick(() => {
        this.initList()
      })
    },
  },
  watch: {
    options: {
      deep: true,
      immediate: true,
      handler(value) {
        // 将原生数据拷贝到本地
        this.copyOriginalList = JSON.parse(JSON.stringify(value))
        this.initList()
      },
    },
  },
}
script>

使用

<template>
  <div>
    <MuchSelect v-model="val1" :options="options" />
  div>
template>

该组件已上传至npm，可直接npm i @code_life/tools_ui进行下载使用。