1.0.4 • Published 7 months ago
elementui-virtual-table v1.0.4
背景
一个基于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>