vue3-big-list 超大表格虚拟显示, 支持键盘操作

原创

已于 2025-03-21 13:33:19 修改 · 291 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#list #vue.js #vue #键盘 #前端 #node.js

于 2025-03-05 22:30:33 首次发布

vue3-big-list

说明

网址: https://gitee.com/linuxmail/vue3-big-list

超大列表优化显示组件(实际上只显示当前需要显示的条目).

支持多选, ctrl/shift等常见操作:

全选 ctrl+a
方向键, up, down, (自动滚动到可视区)
shift+方向键(选中), shift+up, shift+down
(选中), shift + 鼠标, ctrl + 鼠标

例子

https://gitee.com/linuxmail/vue3-big-list/blob/master/demo/app.vue

演示

http://linuxmail.cn/web/big-list-demo.html

用法

模板例子如下

<vue3BigList ref="listRef"
 :itemHeight="itemHeight" <!-- 传入条目固定高度 -->
 @selectedItemChanged="selectedItemChanged"  <!-- 选中条目发生变化 -->
 @scrollTopChanged="scrollTopChanged">  <!-- 滚动条发生变化 -->
  <template #="{ item, selected }"> <!-- 默认槽, item: 传入的条目, selected: 是否选中状态 -->
      <div class="item" :class="{ 'item-selected': selected }">
        {
  
  { item.data }}
      </div>
  </template>