效果图【树形结构的表格页面】
1.安装
npm i vue-table-with-tree-grid -S
or
yarn add vue-table-with-tree-grid
2.引用
import Vue from 'vue'
import ZkTable from 'vue-table-with-tree-grid'
Vue.component('treeTable', ZkTable)
3.组件属性说明
<treeTable
ref="table"
:data="dataList" // 数据源
:columns="columns" // 设置表格中列配置信息 【在data中设置】
:selection-type="false" // 是否有复选框【默认为true】
:expand-type="false" // 是否展开数据【默认为true】
show-index // 是否设置索引列【默认为false】
index-text="#" // 设置索引列头【默认为序号】
border // 是否显示纵向边框【默认为false】
:show-row-hover="false" // 是否鼠标悬停高亮【默认为true】
>
<template slot="slotName" scope="scope">
{{ scope.row }}
</template>
</treeTable>
<script>
export default {
data() {
return {
//表格数据
dataList: [],
//columns(设置表格中列配置信息)
columns: [
{
label: 'xxx', // 列标题名称
prop: 'prop', // 对应列内容的属性名
type: 'template', // 把列内容自定义列模板列
template: 'slotName', // 相对应自定义列模板列的插槽名字【它可以获取到 row, rowIndex, column, columnIndex】
align:'', // 对应列内容的对齐方式,
headerAlign:'', // 对应列标题的对齐方式
}]
}
},
</script>
4.完整API
4.1 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 | - |
4.2 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 | ‘’ |
4.3 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 |
4.3 Table Methods
方法名 | 说明 | 参数 |
getCheckedProp | 当表格为多选类型表格时,用于获取当前所选项的属性,返回一个数组;属性默认为’index’。 | prop |