美文网首页
改造ElementUI的autocomplete支持大数据量下拉

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

作者: ZZES_ZCDC | 来源:发表于2021-08-22 10:44 被阅读0次

    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>
    

    相关文章

      网友评论

          本文标题:改造ElementUI的autocomplete支持大数据量下拉

          本文链接:https://www.haomeiwen.com/subject/fweciltx.html