virtualized-table
Version:
Large data volume table
78 lines (68 loc) • 3.2 kB
Markdown
<p align="center">
<a href="#">
<img width="300" src="https://raw.githubusercontent.com/PengChen96/virtualized-table/master/logo.png"/>
</a>
<h1 align="center">virtualized-table</h1>
</p>
[](http://badge.fury.io/js/virtualized-table)
[](https://travis-ci.com/github/PengChen96/virtualized-table)
[](https://codecov.io/gh/PengChen96/virtualized-table)
[](https://www.npmjs.com/package/virtualized-table)
大数据量虚拟化表格组件
## Usage
### Install
```
$ npm install virtualized-table
```
### Example
```javascript
import {VTable} from "virtualized-table";
<VTable
columns={columns}
dataSource={dataSource}
fixedLeftColumnCount={2}
/>
```
[完整示例](https://github.com/PengChen96/virtualized-table/blob/master/src/example/VTable/index.js)
### API
#### VTable
参数 | 说明 | 类型 | 默认值
---|---|---|---
columns | 表格列 | array | []
dataSource | 表格数据 | array | []
fixedLeftColumnCount | 左边固定列 列数 | number | 0
fixedRightColumnCount | 右边固定列 列数 | number | 0
visibleWidth | 可视区域宽度 | number | 1200
visibleHeight | 可视区域高度 | number | 400
mainRowHeight | 表格主内容行高 | number | 40
columnOffsetCount | 左右列偏移量 | number | 4
emptyText | 空数据渲染 | element | -
rowSelection | 勾选 | object | -
onCellTap | 点击每个子项 | func | Function(value, row, rowIndex, realRowIndex, column, columnIndex, realColumnIndex)
onSelectAll | 勾选全部 | func | Function(selected, selectedRows)
onSelect | 勾选行 | func | Function(record, selected, selectedRows)
rowKey | 行键 | string | index
onRowRemove | 删除行 | func | Function(e, row, rowIndex, realRowIndex)
rowRemoveText | 删除行内容 | element | -
rowRemoveVisible | 是否显示删除按钮 | bool | true
className | .v-table样式 | string | -
loading | 是否显示加载中 | bool | false
loadingText | 加载中内容 | element | "数据加载中，请稍后.."
rowActiveKey | 标记行的键 | string | "active"
rowActiveColor | 标记行的颜色 | string | "#fff1f0"
footerColumnData | 固定底部行数据 | array | -
pointerEventDisabled | 禁止鼠标事件 | bool | false
#### columns
参数 | 说明 | 类型 | 默认值
---|---|---|---
key | 键 | string | -
title | 列头显示文字 | string | -
width | 列宽度 | number | 150
style | 样式 | object | -
render | 数据渲染函数 | func | Function(value, row, rowIndex, realRowIndex, column, columnIndex, realColumnIndex)
headRender | 渲染表头函数 | func | Function(value, row, rowIndex, realRowIndex, column, columnIndex, realColumnIndex)
className | 单元格样式 | string | -
headerClassName | 表头样式(不设置会默认className) | string | -
subColumns | 二级表头(属性跟columns一致) | array | -
## License
virtualized-table is available under the MIT License.