| 1 |
|
| 2 | <p align="center">
|
| 3 | <a href="#">
|
| 4 | <img width="300" src="https://raw.githubusercontent.com/PengChen96/virtualized-table/master/logo.png"/>
|
| 5 | </a>
|
| 6 | <h1 align="center">virtualized-table</h1>
|
| 7 | </p>
|
| 8 |
|
| 9 | [](http://badge.fury.io/js/virtualized-table)
|
| 10 | [](https://travis-ci.com/github/PengChen96/virtualized-table)
|
| 11 | [](https://codecov.io/gh/PengChen96/virtualized-table)
|
| 12 | [](https://www.npmjs.com/package/virtualized-table)
|
| 13 | 大数据量虚拟化表格组件
|
| 14 |
|
| 15 | ## Usage
|
| 16 |
|
| 17 | ### Install
|
| 18 | ```
|
| 19 | $ npm install virtualized-table
|
| 20 | ```
|
| 21 |
|
| 22 | ### Example
|
| 23 | ```javascript
|
| 24 | import {VTable} from "virtualized-table";
|
| 25 |
|
| 26 | <VTable
|
| 27 | columns={columns}
|
| 28 | dataSource={dataSource}
|
| 29 | fixedLeftColumnCount={2}
|
| 30 | />
|
| 31 | ```
|
| 32 | [完整示例](https://github.com/PengChen96/virtualized-table/blob/master/src/example/VTable/index.js)
|
| 33 |
|
| 34 | ### API
|
| 35 | #### VTable
|
| 36 | 参数 | 说明 | 类型 | 默认值
|
| 37 | ---|---|---|---
|
| 38 | columns | 表格列 | array | []
|
| 39 | dataSource | 表格数据 | array | []
|
| 40 | fixedLeftColumnCount | 左边固定列 列数 | number | 0
|
| 41 | fixedRightColumnCount | 右边固定列 列数 | number | 0
|
| 42 | visibleWidth | 可视区域宽度 | number | 1200
|
| 43 | visibleHeight | 可视区域高度 | number | 400
|
| 44 | mainRowHeight | 表格主内容行高 | number | 40
|
| 45 | columnOffsetCount | 左右列偏移量 | number | 4
|
| 46 | emptyText | 空数据渲染 | element | -
|
| 47 | rowSelection | 勾选 | object | -
|
| 48 | onCellTap | 点击每个子项 | func | Function(value, row, rowIndex, realRowIndex, column, columnIndex, realColumnIndex)
|
| 49 | onSelectAll | 勾选全部 | func | Function(selected, selectedRows)
|
| 50 | onSelect | 勾选行 | func | Function(record, selected, selectedRows)
|
| 51 | rowKey | 行键 | string | index
|
| 52 | onRowRemove | 删除行 | func | Function(e, row, rowIndex, realRowIndex)
|
| 53 | rowRemoveText | 删除行内容 | element | -
|
| 54 | rowRemoveVisible | 是否显示删除按钮 | bool | true
|
| 55 | className | .v-table样式 | string | -
|
| 56 | loading | 是否显示加载中 | bool | false
|
| 57 | loadingText | 加载中内容 | element | "数据加载中，请稍后.."
|
| 58 | rowActiveKey | 标记行的键 | string | "active"
|
| 59 | rowActiveColor | 标记行的颜色 | string | "#fff1f0"
|
| 60 | footerColumnData | 固定底部行数据 | array | -
|
| 61 | pointerEventDisabled | 禁止鼠标事件 | bool | false
|
| 62 |
|
| 63 | #### columns
|
| 64 | 参数 | 说明 | 类型 | 默认值
|
| 65 | ---|---|---|---
|
| 66 | key | 键 | string | -
|
| 67 | title | 列头显示文字 | string | -
|
| 68 | width | 列宽度 | number | 150
|
| 69 | style | 样式 | object | -
|
| 70 | render | 数据渲染函数 | func | Function(value, row, rowIndex, realRowIndex, column, columnIndex, realColumnIndex)
|
| 71 | headRender | 渲染表头函数 | func | Function(value, row, rowIndex, realRowIndex, column, columnIndex, realColumnIndex)
|
| 72 | className | 单元格样式 | string | -
|
| 73 | headerClassName | 表头样式(不设置会默认className) | string | -
|
| 74 | subColumns | 二级表头(属性跟columns一致) | array | -
|
| 75 |
|
| 76 | ## License
|
| 77 | virtualized-table is available under the MIT License.
|