bc-pivot-table
Version:
90 lines (60 loc) • 2.91 kB
Markdown
bc-pivot-table
===
一个用div重写table的透视表
*支持虚拟滚动
*支持左边和上面格子合并
*支持大数据下开启webWorker进行计算
*支持展示合计
*支持冻结左边列
*重写布局，用div代替不友好的table
## github
https://github.com/beckhayu888/bc-pivot-table
## 安装
`npm install --save bc-pivot-table`
## 组件
BcBasePivotTable：不固定表左边列的透视表
BcFixedPivotTable：固定左边列的透视表
## 使用
### 全局引入
`import bcPivotTable from 'bc-pivot-table'`
`createApp(App).use(bcPivotTable)`
`<bc-base-pivot-table></bc-base-pivot-table>`
`<bc-fixed-pivot-table></bc-fixed-pivot-table>`
### 局部引入
`import { BcBasePivotTable, BcFixedPivotTable } from 'bc-pivot-table'`
`<bc-base-pivot-table></bc-base-pivot-table>`
`<bc-fixed-pivot-table></bc-fixed-pivot-table>`
### 参数说明
参数 | 类型 | 默认 | 备注
---------|------|---------|------------
`showSum` | `Boolean` | `true` | `是否展示合计`
`valueKey` | `String` | `value` | `data中值的使用字段`
`rowKey` | `Array` | `[]` | `左边列的配置数组`
`colKey` | `Array` | `[]` | `上面表头列的配置数组`
`dataList` | `Array` | `[]` | `data`
`cellStyleOps` | `Object` | `{}` | `透视表配置`
##### rowKey、colKey
参数 | 类型 | 默认 | 备注
---------|------|---------|------------
`label` | `String` | ` ` | `显示的label`
`value` | `String` | ` ` | `data中值的使用字段`
##### cellStyleOps
参数 | 类型 | 默认 | 备注
---------|------|---------|------------
`paddingLeft` | `Number` | ` 6` | `每一个格子的padding-left属性`
`paddingRight` | `Number` | ` 6` | `每一个格子的padding-right属性`
`height` | `Number` | ` 25` | `每一个格子的高度属性`
`fontSize` | `Number` | ` 12` | `字体大小`
`maxWidth` | `Number` | ` 150` | `每一个格子的最大宽度`
`workerAutoLimit` | `Number` | `1000 ` | `数据量到达多少条的时候启动webWorker去进行计算（多数据时的解决方案）`
### 重要remark!!!
切记！！！不能随意更改使格子宽度和高度变化的css属性，不然会造成格子样式错乱
更改颜色等不会改变宽高的样式可以使用深度选择器进行修改
当前版本仅支持vue3.x版本
### 例子
可以自行下载代码查看例子