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

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去除, 以及去除其他关联的代码即可



使用






你可能感兴趣的:(改造ElementUI的autocomplete支持大数据量下拉)