kt-canvas-table 以 canvas 绘制的 vue 表格组件，解决上万行+上万列大数据渲染问题

Install

1npm install kt-canvas-table --save
2
3# or
4yarn add kt-canvas-table
5

Demo && api

• Demo

Example

1<template>
2	<canvas-table :data="data" :columns="columns" :max-height="600">
3	</canvas-table>
4</template>
5<script>
6	import CanvasTable from "kt-canvas-table"
7
8	export default {
9		components: { CanvasTable },
10		data() {
11			return {
12				// data: [],
13				data: [
14					{ profit: "100%", volume: 100, waybill: "700" },
15					{ profit: "100%", volume: 100, waybill: "700" },
16					{ profit: "100%", volume: 100, waybill: "700" },
17					{ profit: "100%", volume: 100, waybill: "700" },
18				],
19				columns: [
20					{
21						label: "序号",
22						key: "$$index",
23						type: "index",
24						fixed: "left",
25						align: "center",
26						colResize: false,
27						width: 40,
28					},
29
30					{
31						label: "营业额",
32						key: "profit",
33					},
34					{
35						label: "利润率",
36						key: "volume",
37						minWidth: 140,
38					},
39					{
40						label: "运单",
41						key: "waybill",
42						minWidth: 140,
43					},
44				],
45			}
46		},
47	}
48</script>

API

1props: {
2  data: { // 自动排序需加上 .sync
3    type: Array,
4    default: () => []
5  },
6  queryValue: { // 查询绑定的值 .sync
7    type: Object,
8    default: () => ({})
9  },
10  columns: { // 列配置，见下方
11    type: Array,
12    default: () => []
13  },
14  maxHeight: {
15    type: Number,
16    default: 700
17  },
18  border: {
19    type: Boolean,
20    default: false
21  },
22  stripe: { // 斑马线
23    type: Boolean,
24    default: false
25  },
26  autoSort: { // 是否自动排序
27    type: Boolean,
28    default: false
29  },
30  sort: { // 排序 支持 .sync
31    type: Object,
32    default: () => ({
33      field: '',  // 排序字段
34      orderByMode: '' // 排序方式： 1 - 倒序，0 - 正序
35    })
36  },
37  hideHeader: Boolean, // 隐藏表头
38  rowHeight: {
39    type: Number,
40    default: 42
41  },
42  headerRowHeight: { // Array： 设置每层的行高， Number： 每层都一样的行高
43    type: [Number, Array],
44    default: 42
45  },
46  summaryRowHeight: Number, // 汇总行高，默认为 rowHeight
47  selectionKey: String, // 多选存的key，默认取index
48  disabledSelection: Function, // 复选框禁用 (row, index) => Boolean
49  selection: { // 多选选中的值 支持.sync
50    type: Array,
51    default: () => []
52  },
53  summary: Object, // 汇总数据，跟行数据格式一样
54  highlightRow: Function, // (row, index) => String:color
55  customStyle: { // 自定义样式
56    type: Object,
57    default: () => ({})
58  },
59  noDataText: {
60    type: String,
61    default: '暂无数据'
62  }
63}
64// 自定义样式
65customerStyle: {
66  padding: 8,
67  borderColor: '#ebeef5',
68  headerBackground: '#f9f9f9',
69  summaryBackground: '#f9f9f9',
70  background: '#fff',
71  activeRowBackground: '#f0f9eb', // 点击行高亮颜色
72  stripeRowBackground: '#fafafa',
73  color: '#666',
74  fontSize: 13,
75  activeColBackground: '#f0f9eb', // 排序列高亮颜色
76  primary: '#9266f9'
77}
78// 列配置
79columns: [{
80  key: String,
81  type: String, // index, selection,
82  fixed: String, // 'left' / 'right'
83  width: Number,
84  minWidth: Number,
85  label: String,
86  labelStyle: [Function, Object] // return Object,
87  formatter: (row, col, index) => [],
88  sortable: [Boolean, String], // true: 排序字段跟key一样， 排序字段跟key不一样时 可以指定一个 String
89  cellStyle: [Function, Object], //  自定义单元格样式
90  align: String, // 
91  labelAlign: String, // 
92  children: [],
93  queryComponent: '', // 查询过滤组件
94  queryAttrs: {}, // 查询过滤组件需要传入的值
95  summaryFormatter: [],
96  headerFormatter: [Array, Function], // 参考formatter
97  headerTools: [Array, Function], // 放在排序后面工具栏， 参考formatter
98  summaryAlign: 'center',
99  summarySpan: Number, // 汇总栏单元格横跨多少个单元格
100  colResize: true, // 是否可拖动列宽
101  sortType: 'number', //  'number' / 'string'
102  tooltip: [String, (row, col, index) => String ], // 气泡
103  headerTooltip: [String, (col) => String ],
104  summaryTooltip: [String, (col) => String ],
105  disabledRightClick: true, // 单元格右击默认会文字选择提供复制使用
106  customRender: [Boolean, (h, { row, col, index }) => {}], // true: 会提供一个slot自定义渲染， 或使用jsx自定义渲染
107  headerCustomRender: [Boolean, (h, { row, col, index }) => {}],
108  summaryCustomRender: [Boolean, (h, { row, col, index }) => {}],
109}]
110// formatter [String, Array, Object, Function]
111(row, col, index, width) => [
112  [ // 每一行标识
113    { // 节点
114      id: 'xxx', // 给事件做标识
115      text: 'xxx',
116      style: {
117        width: 'xxx',
118        height: 'xxx',
119        border: [1, '#ccc'],
120        borderBottom: [1, '#ccc'],
121        borderTop: [1, '#ccc'],
122        borderLeft: [1, '#ccc'],
123        borderRight: [1, '#ccc'],
124        padding: [Number, Array],
125        color: 'xx',
126        fontSize: Number,
127        background: '',
128        borderRadius: [Number, Array],
129        margin: [Number, Array],
130      },
131      icon: {
132        text: 'xxx',
133        direction: '', // 图标位置 'left' / 'right'
134        style: {
135          color: 'xxx',
136          fontSize: 'xxx',
137          fontFamily: 'xxx',
138          margin: 'xx', // 与文字的间距
139          offsetY： 0, // 纵向偏移
140        }
141      },
142      tooltip: { // 气泡
143        content: 'xxx',
144        placement: '',
145        style: {}
146      },
147      on: { //  暂支持的事件有: click, dblclick，支持 .stop 修饰符 阻止其他事件，如 cell-click 事件
148        click: ({ col, row, index, target, box }) => {},
149        'click.stop': ({ col, row, index, target, box }) => {},
150      }
151    }
152  ]
153]
154// slot 插槽：
155{key}_body / {key}_head / {key}_sum
156
157// 事件
158'cell-click': (row, col, index) => {}, 
159'row-click': (row, index) => {},
160'header-cell-click': (col) => {},
161'col-resize': (col) => {},
162'row-dblclick': (row, index) => {},
163'cell-dblclick': (row, col, index) => {},
164'mousemove': ({ row, col, index, target, box, rect }) => {},
165'query-change': (key, val, this.currentQueryValue) => {},
166'selection-change': (currentSelection) => {},
167'mouseleave': () => {},
168'sort': (currentOrder, col) => {},
169'scroll': ({ x, y }) => {},
170
171// 内部方法
172setScroll({ x: Number, y: Number }), // 设置滚动条
173createPopover(rect, { component, attrs, events }, placement), // 创建一个气泡，第一个参数是相对于表格的位置信息，第二个参数是一个对象，需要有一个组件及组件的属性与事件
174hidePopover(), // 隐藏气泡