elementui-virtual-table

背景

一个基于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>