一个用div重写table的透视表
*支持虚拟滚动
*支持左边和上面格子合并
*支持大数据下开启webWorker进行计算
*支持展示合计
*支持冻结左边列
*重写布局,用div代替不友好的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 |
{} |
透视表配置 |
参数 | 类型 | 默认 | 备注 |
---|---|---|---|
label |
String |
|
显示的label |
value |
String |
|
data中值的使用字段 |
参数 | 类型 | 默认 | 备注 |
---|---|---|---|
paddingLeft |
Number |
6 |
每一个格子的padding-left属性 |
paddingRight |
Number |
6 |
每一个格子的padding-right属性 |
height |
Number |
25 |
每一个格子的高度属性 |
fontSize |
Number |
12 |
字体大小 |
maxWidth |
Number |
150 |
每一个格子的最大宽度 |
workerAutoLimit |
Number |
1000 |
数据量到达多少条的时候启动webWorker去进行计算(多数据时的解决方案) |
切记!!!不能随意更改使格子宽度和高度变化的css属性,不然会造成格子样式错乱
更改颜色等不会改变宽高的样式可以使用深度选择器进行修改
当前版本仅支持vue3.x版本
可以自行下载代码查看例子