Need help with vue-table-with-tree-grid?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

MisterTaki
620 Stars 280 Forks 32 Commits 55 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

No Data

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 | 表尾合计行计算方法 | 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 | - |

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 | 鼠标单击checkbox | row, rowIndex, $event | | tree-icon-click | 鼠标单击树形icon | row, rowIndex, $event | | expand-cell-click | 鼠标单击展开单元格 | row, rowIndex, $event |

Table Methods

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.