table_tree_customize
0.2.1 • Public • Published table_tree_customize
A table (with tree-grid) component for Vue.js 2.0. (Its style extends @iView)
Installation
Use npm:
npm i table_tree_customize --save
Usage
import Vue from 'vue'
import LyTable from 'table_tree_customize'
Vue.use(LyTable)
Or
import Vue from 'vue'
import LyTable from 'table_tree_customize'
Vue.component(LyTable.name, LyTable)
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 |
'' |
renderHeader |
头部列名自定义模版对应的插槽(不需要定义列类型为) |
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 |
Package Sidebar
Install
npm i table_tree_customize
Weekly Downloads