iview table固定列错位

在 iView（现更名为 View UI）的 Table 组件中，如果你希望某一列以树形结构（Tree）展示，通常的做法是结合递归组件来实现。iView 本身并没有直接提供 Tree-Table 的功能，但可以通过自定义渲染和递归的方式来实现类似效果。 以下是一个使用 iView 实现“树形表格”的示例： ### 示例数据 ```json [ { "title": "Parent Node 1", "id": 1, "children": [ { "title": "Child Node 1-1", "id": 2 }, { "title": "Child Node 1-2", "id": 3, "children": [ { "title": "Grandchild Node 1-2-1", "id": 4 } ] } ] }, { "title": "Parent Node 2", "id": 5 } ] ``` ### Vue 模板 + JavaScript ```vue <template> <div> <Table :columns="columns"> <Column title="Title" :render="renderTreeColumn" /> <Column title="ID" :render="renderIdColumn" /> </Table> </div> </template> <script> export default { data() { return { columns: [], tableData: [ { title: 'Parent Node 1', id: 1, children: [ { title: 'Child Node 1-1', id: 2 }, { title: 'Child Node 1-2', id: 3, children: [ { title: 'Grandchild Node 1-2-1', id: 4 } ] } ] }, { title: 'Parent Node 2', id: 5 } ] }; }, methods: { renderTreeColumn(h, params) { const level = this.getLevel(params.row); const indent = h('span', { style: { display: 'inline-block', width: `${level * 20}px`, marginLeft: `${level * 20}px` } }); const icon = params.row.children ? 'folder-open' : 'document-text'; return h('span', [ indent, h('Icon', { props: { type: icon }, style: { marginRight: '8px' } }), params.row.title ]); }, renderIdColumn(h, params) { return h('span', params.row.id); }, getLevel(row, level = 0) { if (row._parent) { return this.getLevel(row._parent, level + 1); } return level; } }, mounted() { // 递归处理数据，添加 _parent 属性用于层级追踪 const processRow = (rows, parent = null) => { return rows.map(row => { row._parent = parent; if (row.children) { row.children = processRow(row.children, row); } return row; }); }; this.tableData = processRow(this.tableData); } }; </script> ``` --- ### 解释说明： 1. **`renderTreeColumn` 函数**： - 这个函数负责渲染标题列，并根据节点所在的层级设置缩进。 - 使用 `_parent` 字段记录父级节点，从而计算当前节点的深度 `level`。 - 根据是否有 `children` 显示不同的图标（文件夹或文档）。 2. **`getLevel` 方法**： - 通过递归查找 `_parent` 来计算当前节点的层级。 3. **`processRow` 方法**： - 在 `mounted` 钩子中调用此方法对原始数据进行预处理，添加 `_parent` 字段，便于后续层级判断。 --- ###

在iView Table组件中，如果你想在多选列的表头后添加“选择”二字，你可以通过自定义表头模板的方式来实现。首先，你需要引入`<Table>`和`<template>`标签，并设置一个多选列`selection`属性以及一个包含你的自定义头部内容的`row-class-name`属性。 下面是一个简单的示例： ```html <template> <Table :data="tableData" :columns="tableColumns" selection="multiple"> <!-- 自定义表头行 --> <template slot="selection" slot-scope="{ selectedItems }"> <span>选择</span> <Button @click="selectAll">全选</Button> <Button @click="deselectAll">全取消</Button> </template> <!-- 表格数据列 --> <template slot="default"> ... (这里放置你的表格数据列) </template> </Table> </template> <script> export default { data() { return { tableData: [], // 填充你的数据 tableColumns: [ { type: 'selection', width: 60 }, // 多选列 { prop: 'column1', label: 'Column 1' }, { prop: 'column2', label: 'Column 2' }, ... // 其他列... ], selectedItems: [] // 初始化selectedItems }; }, methods: { selectAll() { this.$table.selectAll(); }, deselectAll() { this.$table.deselectAll(); } } }; </script> ``` 在这个例子中，我们在表头的slot中插入了“选择”，并提供了全选和全取消按钮。`selectAll`和`deselectAll`方法用于操作多选状态。记得替换`tableData`和`tableColumns`为你实际的数据和列配置。