iview table 树型

### iView Table 组件实现树形结构的方法 iView（现更名为 View UI）的 `Table` 组件本身并不直接支持树形结构，但可以通过自定义渲染和逻辑来实现树形表格的功能。以下是实现方法的具体说明： #### 1. 数据结构设计 在实现树形表格时，数据需要以嵌套的形式组织。每个节点可以包含子节点的数组。例如： ```javascript const data = [ { name: 'Node 1', expand: false, children: [ { name: 'Child Node 1-1' }, { name: 'Child Node 1-2' } ] }, { name: 'Node 2', expand: false, children: [ { name: 'Child Node 2-1' } ] } ]; ``` 这里的关键是为每个父节点添加一个 `expand` 属性，用于控制是否展开子节点[^1]。 #### 2. 自定义列渲染 通过 `render` 函数来自定义单元格的内容，可以实现树形结构的展开/折叠图标以及层级缩进效果。以下是一个示例代码： ```vue <template> <Table :columns="columns" :data="tableData"></Table> </template> <script> export default { data() { return { tableData: [ { name: 'Node 1', expand: false, children: [ { name: 'Child Node 1-1' }, { name: 'Child Node 1-2' } ] }, { name: 'Node 2', expand: false, children: [ { name: 'Child Node 2-1' } ] } ], columns: [ { title: '名称', key: 'name', render: (h, params) => { const row = params.row; const iconType = row.expand ? 'ios-remove' : 'ios-add'; return h('div', [ h('Icon', { props: { type: iconType }, style: { cursor: 'pointer' }, on: { click: () => { this.toggleRow(row, params.index); } } }), h('span', row.name) ]); } } ] }; }, methods: { toggleRow(row, index) { if (row.expand) { this.tableData.splice(index + 1, row.children.length); } else { this.tableData.splice(index + 1, 0, ...row.children.map(child => ({ ...child, expand: false }))); } this.$set(row, 'expand', !row.expand); } } }; </script> ``` #### 3. 动态调整数据 当用户点击展开或折叠按钮时，需要动态调整表格的数据。通过 `splice` 方法插入或移除子节点，并更新父节点的 `expand` 状态[^2]。 #### 4. 样式优化 为了增强用户体验，可以为树形表格添加一些样式，例如： - 层级缩进：通过递归计算每个节点的层级，并设置相应的 `margin-left`。 - 滚动条优化：如果表格内容较多，可以启用虚拟滚动功能。 #### 5. 扩展功能 如果需要更复杂的树形表格功能，可以参考以下扩展点： - **多级展开**：支持多级嵌套的树形结构。 - **懒加载**：对于大数据量的场景，可以通过接口动态加载子节点数据。 - **编辑功能**：为每个节点添加编辑、删除等操作按钮[^3]。 ### 示例效果 通过上述方法，可以实现一个支持展开/折叠的树形表格。用户可以点击行前的图标来查看或隐藏子节点。 ---