改造ElementUI的autocomplete支持大数据量下拉

治电小白菜

发布于 2021-11-24 14:01:35

1.3K0

发布于 2021-11-24 14:01:35

ElementUI的autocomplete组件由于后台会传很多的数据用来显示, 可以用下拉加载来处理, 也可以用虚拟滚动来处理, 由于虚拟滚动感觉实现更方便, 以及到下拉出现过多时滚动存在一定性能问题, 所以选择了虚拟滚动参考代码: klren0312/big-data-autocomplete (github.com) 示例: https://klren0312.github.io/big-data-autocomplete/

用的的第三方库

虚拟滚动使用的是Akryum/vue-virtual-scroller: ⚡️ Blazing fast scrolling for any amount of data (github.com)

它提供了两种组件

一个是RecycleScroller, 当列表每一项高度一样的时候可以使用
另一个是DynamicScroller, 当列表每一项高度是动态变化的时候使用

这次由于是固定高度列表, 所以使用RecycleScroller

修改方法

主要就是对下拉列表进行替换

再将建议弹框组件里的ELScrollbar去除, 以及去除其他关联的代码即可

使用

<template>
  <div id="app">
    <auto-complete
      v-model="value"
      :fetch-suggestions="querySearch"
      :popperAppendToBody="true"
      placeholder="请输入"
      size="mini"
      value-key="name"
      :clearable="true"
    >
    </auto-complete>
  </div>
</template>

<script>
import AutoComplete from '@/components/AutoComplete'
export default {
  name: 'App',
  components: {
    AutoComplete
  },
  data() {
    return {
      value: '',
      searchList: [],
      selectSearchType: 1,
      valueKey: 'name'
    }
  },
  mounted() {
    const arr = new Array(10000).fill(1).map((v, i) => {
      return {
        statId: i,
        name: 'test' + i
      }
    })
    this.searchList = arr
  },
  methods: {
    querySearch(queryString, cb) {
      let filterData = this.searchList

      if (queryString && queryString.indexOf('所有') === -1) {
        filterData = this.searchList.filter(this.createFilter(queryString))
      }
      const results = [{ name: '所有', statId: 0 }, ...filterData]
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return string =>
        string[this.valueKey]
          .toLowerCase()
          .indexOf(queryString.toLowerCase()) !== -1
    }
  }
}
</script>

<style>
</style>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2021/8/22 上，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript