bc-pivot-table

用div重构的一个透视表
653 6
Install
npm install bc-pivot-table
Latest Version:1.3.1
Vue:3
License:MIT
Last Updated:Mar 7, 2022
Links: GitHub  ·  npm
Maintainer: beckhayu

bc-pivot-table

A pivot table rewriting table with div

*Support virtual scrolling

*Support the merging of left and upper grids

*Enable webworker for calculation under big data

*Total supported display

*Support freezing the left column

*Rewrite the layout and replace the unfriendly table with Div

bc-pivot-table preview

github

https://github.com/beckhayu888/bc-pivot-table

Install

npm install --save bc-pivot-table

Components

BcBasePivotTable

BcFixedPivotTable

Use

Global import

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>

Local introduction

import { BcBasePivotTable, BcFixedPivotTable } from 'bc-pivot-table'

<bc-base-pivot-table></bc-base-pivot-table>

<bc-fixed-pivot-table></bc-fixed-pivot-table>

Parameter description

parameter type default remark
showSum Boolean true Show total
valueKey String value Use field of data value
rowKey Array [] Configuration array in the left column
colKey Array [] Configuration array of header column above
dataList Array [] data
cellStyleOps Object {} Pivot table configuration
rowKey、colKey
parameter type default remark
label String label
value String Use field of data value
cellStyleOps
parameter type default remark
paddingLeft Number 6 padding-left
paddingRight Number 6 padding-right
height Number 25 Height attribute of each grid
fontSize Number 12 fontSize
maxWidth Number 150 Maximum width of each grid
workerAutoLimit Number 1000 When the amount of data reaches how many pieces, start webworker to calculate (solution for multiple data)

important remark!!!

Remember!!! You can't change the CSS attribute that changes the width and height of the grid at will, otherwise the grid style will be disordered

Changing the color and other styles that do not change the width and height can be modified using the depth selector

The current version only supports vue3 X version

example

effect Example code Example code Example code

You can download the code to view the example

Related Packages

@persagy2/eslint-plugin

一个适用于 vue3.x、typescript 项目的通用eslint预设插件

2,894
vue-echarts-linkage

vue3 echarts 的联动组件

7,147 4
qveui

Quick vue 3.x UI components styled

2,549
qve

Quick Vue3.x UI Engineering

1,192
exclusiveuitext

一些常用的UI组件

734 0

Version History

Version Released Vue License
1.3.1 ^3.0.0 MIT
1.3.0 ^3.0.0 MIT
1.2.8 ^3.0.0 MIT
1.2.3 ^3.0.0 MIT
1.2.2 ^3.0.0 MIT