背景

一个基于element-ui 的虚拟滚动列表的封装，支持element-ui 表格的其他属性和方法。

• 设计初衷
  • 因element-ui 没有相关的组件，且业务上会用到巨量数据渲染的问题
• 设计原理
  • 因为轮子太多，没有参考市面上正常的虚拟列表的做法，采用了数据截取的办法；
  • 利用滚动的高度，截取对应比例的数据展示；
• 缺点
  • 表格中el-table-column中type，暂时不支持type为index；只能设置为prop="index"；
  • 在不开启固定行高的时候，滚动到底部的时候容易造成表格抖动；
  • 无法对select与select-all做修改，只能使用自定义事件接收返回数据；

组件参数prop

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | data | 显示的数据 | array | -- | | rowKey | 与element-ui兼容；同时也是组件判断勾选数据的依据 | String | id | | fixedLineHeight | 是否启动固定行高(建议极端需求的情况下关闭，否则滑动表格也会出现抖动) | Boolean | true | | lineHeight | 表格行高 | Number || String | 45 | | maxHeight | 表格高度 | Number || String | 450 | | showDataLength | 截取数据长度 | Number || String | 80 |

组件事件

| 事件名 | 说明 | 返回值 | | --- | --- | --- | | getSelectAll | 当用户手动勾选全选checkbox时, 返回勾选数据 | Array | | getSelect | 当用户手动勾选数据行的checkbox时，返回勾选数据 | Array |

用例

<elementui-virtual-table
  :data="tableData"
  @get-select-all="selectAll"
  @get-select="selectAction"
  rowKey="settleLineId"
>
  <el-table-column
    type="selection"
    reserve-selection
    width="50"
  />
  <el-table-column
    prop="index"
    label="序号"
    width="70"
  />
  <el-table-column
    prop="name"
    label="姓名"
  />
</elementui-virtual-table>