elementui-virtual-table
1.0.4 • Public • Published
一个基于element-ui 的虚拟滚动列表的封装,支持element-ui 表格的其他属性和方法。
- 设计初衷
- 因element-ui 没有相关的组件,且业务上会用到巨量数据渲染的问题
- 设计原理
- 因为轮子太多,没有参考市面上正常的虚拟列表的做法,采用了数据截取的办法;
- 利用滚动的高度,截取对应比例的数据展示;
- 缺点
- 表格中el-table-column中type,暂时不支持type为index;只能设置为prop="index";
- 在不开启固定行高的时候,滚动到底部的时候容易造成表格抖动;
- 无法对select与select-all做修改,只能使用自定义事件接收返回数据;
参数 |
说明 |
类型 |
默认值 |
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>
Package Sidebar
Install
npm i elementui-virtual-table
Weekly Downloads