iview tree table
npm install iview-tree-table对 iview UI 组件的 Tree 扩展
``
npm install iview-tree-table --save
`
import TreeTable from 'iview-tree-table'
export default {
name: 'example',
components: {
TreeTable
}
}
``
| 属性 | 说明 | 类型 | 参数 | 默认值 |
| ------------- | --------------------------------------------- | -------- | ---- | ---------- |
| 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 |
| 属性 | 说明 | 类型 | 默认值 |
| --------- | --------------------------------------------------------------- | -------- | ------ |
| 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 | - |
| 事件名 | 说明 | 参数 |
| ---------------- | ---------------------- | -------------------- |
| on-check-change | 点击复选框时触发 | 当前已勾选节点的数组 |
| on-toggle-expand | 展开和收起子列表时触发 | 当前节点的数据 |
| on-sort-change | 排序时有效，当点击排序时触发 | column：当前列数据
key：排序依据的指标
order：排序的顺序，值为 asc 或 desc|
| 方法名 | 说明 | 参数 |
| --------------- | ---------------- | ----------------------------------------- |
| getCheckedNodes | 获取被勾选的节点 | 是否获取不定状态 indeterminate 默认 false |
| checkAll | 全选或全部取消 | - |
| 属性 | 说明 | 类型 | 默认值 |
| --------------- | -------------------------------------- | ------- | ------ |
| expand | 是否展开直子节点 | Boolean | false |
| disabled | 禁掉响应 | Boolean | false |
| disableCheckbox | 禁掉 checkbox | Boolean | false |
| checked | 是否勾选(如果勾选，子节点也会全部勾选) | Boolean | false |