vue-table-with-tree-grid参数大全、参数配置

2021-07-15 阅读：2209 类型：前端分类：Vue 标签： Vue ElementUI

vue-table-with-tree-grid参数大全、参数配置，供大家参考使用

1、安装：

npm:

npm i vue-table-with-tree-grid -S

yarn:

yarn add vue-table-with-tree-grid

2、引入

Vue.use(ZkTable)

import Vue from 'vue'
import ZkTable from 'vue-table-with-tree-grid'
 
Vue.component(ZkTable.name, ZkTable)

3、API参数：

属性

说明

类型

参数

默认值

data

表格各行的数据

Array

[]

empty-text

表格数据为空时显示的文字

String

'暂无数据'

columns

表格各列的配置（具体见下文：Columns Configs）

Array

[]

show-header

是否显示表头

Boolean

true

show-index

是否显示数据索引

Boolean

false

index-text

数据索引名称

String

'序号'

show-summary

是否显示表尾合计行

Boolean

false

sum-text

表尾合计行首列名称

String

'合计'

summary-method

表尾合计行计算方法

Function

data, column, columnIndex

max-height

最大高度

[String, Number]

'auto'

stripe

是否显示间隔斑马纹

Boolean

false

border

是否显示纵向边框

Boolean

false

show-row-hover

鼠标悬停时，是否高亮当前行

Boolean

true

tree-type

是否为树形表格

Boolean

false

children-prop

树形表格中遍历的属性名称

String

'children'

is-fold

树形表格中父级是否默认折叠

Boolean

true

expand-type

是否为展开行类型表格（为 True 时，需要添加名称为 '$expand' 的作用域插槽, 它可以获取到 row, rowIndex)

Boolean

false

selection-type

是否为多选类型表格

Boolean

false

row-key

行数据的 Key，用来优化 Table 的渲染

Function

row, rowIndex

rowIndex

row-class-name

额外的表格行的类名

String, Function

row, rowIndex

cell-class-name

额外的表格行的类名

String, Function

row, rowIndex, column, columnIndex

row-style

额外的表格行的样式

Object, Function

row, rowIndex

cell-style

额外的表格单元格的样式

Object, Function

row, rowIndex, column, columnIndex

4、 column配置

属性

说明

类型

默认值

label

列标题名称

String

prop

对应列内容的属性名

String

align

对应列内容的对齐方式，可选值有 'center', 'right'

String

'left'

headerAlign

对应列标题的对齐方式，可选值有 'center', 'right'

String

'left'

width

列宽度

[String, Number]

'auto'

minWidth

列最小宽度

[String, Number]

'80px'

type

列类型，可选值有 'template'(自定义列模板)

String

template

列类型为 'template'(自定义列模板) 时，对应的作用域插槽（它可以获取到 row, rowIndex, column, columnIndex）名称

String

5、Table 事件

事件名

说明

参数

cell-click

单击某一单元格