el-table-virtual-scroll

基于Element-UI的Table 组件开发的虚拟滚动组件，支持动态高度，解决数据量大时滚动卡顿的问题。

⚠️仅支持vue2。

demo & 源码：https://xiaocheng555.github.io/el-table-virtual-scroll/

版本说明

当前版本 2.x.x

• 重构树形表格和懒加载功能，兼容 element-ui 树形表格原有的属性、事件、方法，支持树形表格筛选；废弃了模拟树结构的方案和相关的api；同时扩展了树形表格的方法

• 优化 element-ui 多选、扩展行功能，支持 element-ui 多选、扩展行原有的属性、事件、方法

• 2.x.x 版本不支持 1.x.x 树形表格功能，其他都能兼容

旧版本 1.x.x

旧版本说明文档：https://github.com/xiaocheng555/el-table-virtual-scroll/blob/master/README-v1.md

旧版本demo：https://xiaocheng555.github.io/el-table-virtual-scroll/v1

安装

$ npm i el-table-virtual-scroll -S

用法

<virtual-scroll
  :data="list"
  :item-size="62"
  key-prop="id"
  @change="(renderData) => virtualList = renderData">
  <el-table 
    row-key="id" 
    :data="virtualList" 
    height="500px">
  </el-table>
</virtual-scroll>
...

import VirtualScroll from 'el-table-virtual-scroll'

export default {
  component: {
    VirtualScroll
  },
  data () {
    list: [
      {
        id: 1,
        text: 'content'
      },
      // ...... 省略n条
      {
        id: 2000,
        text: 'content2'
      }
    ],
    virtualList: []
  }
}

el-table-virtual-scroll 组件

Props

Methods

Events

virtual-column 组件

使用 <el-table-virtual-scroll> 做表格虚拟滚动，是不支持 ElementUI 表格的原有的索引、多选、扩展行等功能，需要使用 <virtual-column> 来兼容。<virtual-column> 组件内封装了 <el-table-column>，支持传入 <el-table-column> 组件的props属性。 其中 <virtual-column> 会在表格row数据上扩展 $v_checked、$v_expanded ... 等属性，请悉知。

更多demo & 源码查看：https://xiaocheng555.github.io/el-table-virtual-scroll/

引入

import { VirtualColumn } from 'el-table-virtual-scroll'

...

<virtual-column type="index/selection/radio/expand/tree"></virtual-column>

Props

el-table-virtual-scroll 组件注意事项

• 使用组件前，请确保项目中有引入 element-ui 组件库。

• <el-table> 组件最好写上 row-key 属性，能避免一些奇怪的问题。例：<el-table row-key="id">，其中id为数据中唯一key值。

• Element-UI Table 的多选、扩展行、索引、树功能，需要将 <el-table-column> 改为 <virtual-column type="selection/expand/index/radio/tree"> 组件 。

更新内容

2024-9-2

• 重构：兼容树形表格；兼容扩展行、多选原生事件、属性、方法；

• npm 2.0.0 版本发包

2024-9-16

• 修复virtualized更改在筛选和树形表格上会有问题

• 修复多选select-change事件在表格数据更新后未触发，导致旧数据未清除 #100

• npm 2.0.1 版本发包