1.1.1 • Published 5 years ago
iview tree table
对 iview UI 组件的 Tree 扩展
Installation
npm install iview-tree-table --save
import TreeTable from 'iview-tree-table'
export default {
name: 'example',
components: {
TreeTable
}
}
<tree-table :data="data" :columns="columns" show-checkbox border>
</tree-table>
API
Table Attributes
属性 | 说明 | 类型 | 参数 | 默认值 |
---|
data | 表格各行的数据 | Array | - | [] |
columns | 表格各列的配置(具体见下文:Columns Configs) | Array | - | [] |
border | 是否显示 边框 | Boolean | - | false |
bottom-line | 是否显示 每行的底线 | Boolean | - | false |
show-checkbox | 是否显示多选框 | Boolean | - | false |
empty-text | 表格数据为空时显示的文字 | String | - | '暂无数据' |
children-key | 定义子节点键 | String | - | 'children' |
load-data | 异步加载数据的方法 | Function | - | - |
show-header | 是否显示表头 | Boolean | - | false |
arrow-icon-right | 箭头图标-右 | String | - | arrow-right-b |
arrow-icon-down | 箭头图标-下 | String | - | arrow-down-b |
loading-icon | 加载图标 | String | - | load-c |
Columns Configs
属性 | 说明 | 类型 | 默认值 |
---|
title | 列标题名称 | String | '' |
key | 对应列内容的属性名 | String | '' |
style | 对应列标题的样式 | Object | - |
className | 对应列标题的样式名称 | String | '' |
width | 列宽度 | Number | - |
minWidth | 列最小宽度 | Number | - |
maxWidth | 列最大宽度 | Number | - |
template | 自定义列模板,作用域插槽(它可以获取到 data, node, column)名称 | String | '' |
render | 自定义渲染 render(h, {data, node, column}) | Function | - |
sortable | 对应列是否可以排序 | Boolean | false |
height | 表格高度(不包含头) | Number | - |
maxHeight | 表格最高高度(不包含头) | Number | - |
Table Events
事件名 | 说明 | 参数 |
---|
on-check-change | 点击复选框时触发 | 当前已勾选节点的数组 |
on-toggle-expand | 展开和收起子列表时触发 | 当前节点的数据 |
on-sort-change | 排序时有效,当点击排序时触发 | column:当前列数据 key:排序依据的指标 order:排序的顺序,值为 asc 或 desc |
Table Methods
方法名 | 说明 | 参数 |
---|
getCheckedNodes | 获取被勾选的节点 | 是否获取不定状态 indeterminate 默认 false |
checkAll | 全选或全部取消 | - |
Data
属性 | 说明 | 类型 | 默认值 |
---|
expand | 是否展开直子节点 | Boolean | false |
disabled | 禁掉响应 | Boolean | false |
disableCheckbox | 禁掉 checkbox | Boolean | false |
checked | 是否勾选(如果勾选,子节点也会全部勾选) | Boolean | false |