/tree-table-vue

A table (with tree-grid) component for Vue.js 2.0

Primary LanguageJavaScript

tree-table-vue

A table(with tree-grid) component development based on vue-table-with-tree-grid @MisterTaki)

在vue-table-with-tree-grid v0.2.4版本基础上,修复了vue新版本对重复key检测造成的警告

添加了自定义显示展开子级按钮的属性expand-key

注意:v1.0.7版本开始,修改了columns的prop属性为key,label属性为title,修改selection-type为selectable,添加了select-type属性

作者系列视频课程:

Vue技术栈开发实战(26课时)

TypeScript完全解读(26课时)

Example

Example

Installation

Use npm:

npm i tree-table-vue -S

Or use yarn:

yarn add tree-table-vue

Usage

import Vue from 'vue'
import TreeTable from 'tree-table-vue'

Vue.use(TreeTable)

Or

import Vue from 'vue'
import TreeTable from 'tree-table-vue'

Vue.component(TreeTable.name, TreeTable)

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 - []
expand-key 需要显示展开按钮的列的key(columns列对象里的prop) String - 默认是第一列的prop
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
selectable 是否为多选类型表格 Boolean - false
select-type 选择列渲染的形式, radio或checkbox String - checkbox
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

属性 说明 类型 默认值
title 列标题名称 String ''
key 对应列内容的属性名 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 鼠标单击checkbox row, rowIndex, $event
tree-icon-click 鼠标单击树形icon row, rowIndex, $event
expand-cell-click 鼠标单击展开单元格 row, rowIndex, $event

Table Methods

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