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 |