Vue-tree-view-table NPM

vue-tree-view-table

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

Installation

Use npm:

npm i vue-tree-view-table -S

Or use yarn:

yarn add vue-tree-view-table

Usage

import Vue from 'vue'
import SafeTreeview from 'vue-tree-view-table'

Vue.use(SafeTreeview)

import Vue from 'vue'
import SafeTreeview from 'vue-tree-view-table'

Vue.component(SafeTreeview.name, SafeTreeview)

Table Attributes

Atributo	Descripción	tipo	Parametro	Valor por defecto
data	datos a mostrar	Array	-	[]
empty-text	texto a mostrar cuando no tiene datos	String	-	'Aun no hay datos'
columns	configuracion de las columnas de la tabla（ver abajo：Columns Configs）	Array	-	[]
show-header	si se muestra el encabezado	Boolean	-	true
show-index	si se muestra el indice de datos	Boolean	-	false
index-text	nombre del indice de datos	String	-	'index'
show-summary	si se muestra el final total de la tabla	Boolean	-	false
sum-text	suma total de la primera fila	String	-	'total'
summary-method	Método de calculo de suma	Function	data, column, columnIndex	-
max-height	Tamaño maximo de la tabla	String, Number	-	'auto'
stripe	si se muestra el color en intervalo de las filas	Boolean	-	false
border	si la tabla tiene bordes	Boolean	-	false
show-row-hover	si se colorea cuando pase el cursor por encima	Boolean	-	true
tree-type	si es tipo árbol o no	Boolean	-	false
children-prop	nombre de la propiedad que contiene los hijos	String	-	'children'
is-fold	si se muestra plegado	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	-

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-contextmenu	在某一单元格上点击鼠标右键	row, rowIndex, column, columnIndex, $event
row-click	单击某一行	row, rowIndex, $event
row-contextmenu	在某一行上点击鼠标右键	row, rowIndex, $event
tree-icon-click	鼠标单击树形icon	row, rowIndex, $event
expand-cell-click	鼠标单击展开单元格	row, rowIndex, $event