Home

Awesome

vue-table-with-tree-grid

A table (with tree-grid) component for Vue.js 2.0. (Its style extends @iView)

Example

Example

Installation

Use npm:

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

Or use yarn:

yarn add vue-table-with-tree-grid

Usage

import Vue from 'vue'
import ZkTable from 'vue-table-with-tree-grid'

Vue.use(ZkTable)

Or

import Vue from 'vue'
import ZkTable from 'vue-table-with-tree-grid'

Vue.component(ZkTable.name, ZkTable)

more information please see example..., or git clone this repository and open dev mode (I will give it a homepage later...).

API

Table Attributes

属性说明类型参数默认值
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表尾合计行计算方法Functiondata, 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 的渲染Functionrow, rowIndexrowIndex
row-class-name额外的表格行的类名String, Functionrow, rowIndex-
cell-class-name额外的表格行的类名String, Functionrow, rowIndex, column, columnIndex-
row-style额外的表格行的样式Object, Functionrow, rowIndex-
cell-style额外的表格单元格的样式Object, Functionrow, rowIndex, column, columnIndex-

Columns Configs

属性说明类型默认值
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''

Table Events

事件名说明参数
cell-click单击某一单元格row, rowIndex, column, columnIndex, $event
cell-dblclick双击某一单元格row, rowIndex, column, columnIndex, $event
cell-contextmenu在某一单元格上点击鼠标右键row, rowIndex, column, columnIndex, $event
cell-mouseenter鼠标滑入某一单元格row, rowIndex, column, columnIndex, $event
cell-mouseleave鼠标滑出某一单元格row, rowIndex, column, columnIndex, $event
row-click单击某一行row, rowIndex, $event
row-dblclick双击某一行row, rowIndex, $event
row-contextmenu在某一行上点击鼠标右键row, rowIndex, $event
row-mouseenter鼠标滑入某一行row, rowIndex, $event
row-mouseleave鼠标滑出某一行row, rowIndex, $event
checkbox-click鼠标单击checkboxrow, rowIndex, $event
tree-icon-click鼠标单击树形iconrow, rowIndex, $event
expand-cell-click鼠标单击展开单元格row, rowIndex, $event

Table Methods

方法名说明参数
getCheckedProp当表格为多选类型表格时，用于获取当前所选项的属性，返回一个数组；属性默认为'index'。prop