对el-select进行二次封装，解决数据量过大造成页面卡顿问题_el-select 下拉内容很多 页面卡死

问题

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

解决思路

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

难题分析

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

实现

<!-- 
    该组件用于处理大量下拉数据（几千上万条）导致页面卡顿的情况
    数据不多时不推荐使用，因为多了一些处理逻辑理论上来说会比el-select慢
 -->
<!-- 
    该组件用于处理大量下拉数据（几千上万条）导致页面卡顿的情况
    数据不多时不推荐使用，因为多了一些处理逻辑理论上来说会比el-select慢
 -->
<template>
  <el-select
    ref="elSelect"
    :value="value"
    :filter-method="selfFilter"
    :filterable="filterable"
    :clearable="clearable"
    :noDataText="emptyText"
    v-bind="$attrs"
    v-on="$listeners"
    @remove-tag="removeTag"
    @change="selectChange"
    @visible-change="visibleChange"
  >
    <template v-for="(value, name) in $slots" #[name]>
      <slot :name="name"> </slot>
    </template>
    <el-option
      v-for="item in showOptions"
      :key="item[optionValue]"
      :value="item[optionValue]"
      :label="item[optionLabel]"
    >
      <slot name="option" :data="item"></slot>
    </el-option>
    <span ref="endOption" v-show="selectVisible"></span>
  </el-select>
</template>

<script>
export default {
  name: 'ClMuchSelect',
  npmUp: true,
  props: {
    value: null,
    // 接口拿到的所有数据
    options: {
      type: Array,
      default: () => []
    },
    // 下拉label
    optionLabel: {
      type: String,
      default: 'label'
    },
    // 用例进行存储的字段
    optionValue: {
      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,
      selectVisible: false
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.endEle = this.$refs.endOption
      this.endEle ? this.createObserver() : null
    })
  },
  beforeDestroy() {
    this.delObserver()
  },
  computed: {
    curLength() {
      return this.showOptions.length
    },
    optionsLength() {
      return this.options.length
    },
    filterable() {
      return this.$attrs.filterable === false ? false : true
    },
    clearable() {
      return this.$attrs.clearable === false ? false : true
    },
    multiple() {
      return this.$attrs.multiple === false ? false : true
    },
    // 没有数据或者没有查询到数据的时候的文本展示
    emptyText() {
      // 开启查询且原始列表有值且展示列表无数据则表示没有筛选出数据
      if (this.filterable && this.optionsLength > 0 && this.curLength === 0) {
        return this.$attrs.noMatchText || this.$attrs.noDataText
      } else {
        return this.$attrs.noDataText
      }
    }
  },
  methods: {
    // 初始化下拉列表
    initList() {
      this.isFilter = false
      this.filterOption = []
      if (this.value) {
        // 如果是多选且有值需要回显
        if (this.multiple && 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.optionValue])) {
              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', 'boolean'].includes(typeof this.value)
        ) {
          let index = this.copyOriginalList.findIndex(
            (item) => item[this.optionValue] === this.value
          )
          if (index >= 0) {
            this.copyOriginalList.splice(
              0,
              0,
              this.copyOriginalList.splice(index, 1)[0]
            )
          }
        }
      }
      this.showOptions = this.copyOriginalList.slice(0, this.showListNum)
    },
    // 解决select出现立即触发addOption的bug
    visibleChange(flag) {
      if (flag) {
        setTimeout(() => {
          this.selectVisible = flag
        }, 100)
      } else {
        this.selectVisible = false
      }
    },
    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['filter-method'] === 'function') {
        this.filterOption = this.$attrs['filter-method'](
          val,
          this.copyOriginalList
        )
      } else {
        // 默认按照输入的文本进行过滤
        this.filterOption = this.copyOriginalList.filter((item) => {
          return String(item[this.optionLabel]).includes(val)
        })
      }
      this.showOptions = this.filterOption.slice(0, this.showListNum)
    },
    // 到底部新加数据
    addOption() {
      if (!this.selectVisible) {
        return
      }
      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.optionValue] === val
      )
      let newIndex = this.copyOriginalList.findIndex(
        (item) => item[this.optionValue] === val
      )
      this.copyOriginalList.splice(
        oldIndex,
        0,
        this.copyOriginalList.splice(newIndex, 1)[0]
      )

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

</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273

使用

<template>
  <div>
    <MuchSelect v-model="val1" :options="options" />
  </div>
</template>
1
2
3
4
5

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