vue 树形表格 上移下移

### Vue 中实现树形表格行上移下移功能 在 Vue.js 中实现树形表格的行上移下移功能可以通过多种方法完成。以下是基于 Vue 和 Element Plus 的具体实现方案。 #### 1. 数据结构准备 为了支持树形表格中的上移和下移操作，需要定义一个具有父子关系的数据模型。通常情况下，这种数据会包含 `children` 属性用于表示子节点[^1]。 ```javascript const treeData = [ { id: 1, name: 'Parent Node', children: [ { id: 2, name: 'Child Node 1' }, { id: 3, name: 'Child Node 2' } ] } ]; ``` #### 2. 方法逻辑设计 对于每一行的操作，需判断当前行是否允许上移或下移。如果该行为第一个，则不允许上移；如果是最后一个，则不允许下移。通过调整数组索引来实现位置交换[^2]。 ##### (1) 上移函数 当点击某一行的“上移”按钮时，将其与前一行的位置互换： ```javascript function moveUp(row, list) { const index = list.findIndex(item => item.id === row.id); if (index > 0) { const temp = list[index - 1]; list.splice(index - 1, 2, row, temp); // 调整顺序 } } ``` ##### (2) 下移函数 当点击某一行的“下移”按钮时，将其与后一行的位置互换： ```javascript function moveDown(row, list) { const index = list.findIndex(item => item.id === row.id); if (index >= 0 && index < list.length - 1) { const temp = list[index + 1]; list.splice(index, 2, temp, row); // 调整顺序 } } ``` #### 3. 组件模板编写 使用 Element Plus 提供的 `el-table` 和自定义列渲染器来显示每行的控制按钮[^3]。 ```html <template> <div> <el-table :data="treeData" row-key="id" default-expand-all> <el-table-column prop="name" label="名称"></el-table-column> <el-table-column label="操作"> <template #default="{ row }"> <el-button type="text" @click="moveUp(row, getRowList(row))">上移</el-button> <el-button type="text" @click="moveDown(row, getRowList(row))">下移</el-button> </template> </el-table-column> </el-table> </div> </template> ``` #### 4. 辅助工具函数 由于树形表格可能涉及多层嵌套，因此需要递归获取目标行所在的列表。 ```javascript function getRowList(row, data = treeData.flat(Infinity)) { return data.filter(item => item.parentId === row.parentId || !row.parentId); } ``` --- ### 完整代码示例 以下是一个完整的 Vue 组件实现： ```vue <template> <div> <el-table :data="treeData" row-key="id" default-expand-all> <el-table-column prop="name" label="名称"></el-table-column> <el-table-column label="操作"> <template #default="{ row }"> <el-button type="text" @click="moveUp(row)">上移</el-button> <el-button type="text" @click="moveDown(row)">下移</el-button> </template> </el-table-column> </el-table> </div> </template> <script> export default { data() { return { treeData: [ { id: 1, parentId: null, name: 'Parent Node', children: [ { id: 2, parentId: 1, name: 'Child Node 1' }, { id: 3, parentId: 1, name: 'Child Node 2' } ] } ].flat(Infinity) }; }, methods: { moveUp(row) { const list = this.getRowList(row); const index = list.findIndex(item => item.id === row.id); if (index > 0) { const temp = list[index - 1]; list.splice(index - 1, 2, row, temp); } }, moveDown(row) { const list = this.getRowList(row); const index = list.findIndex(item => item.id === row.id); if (index >= 0 && index < list.length - 1) { const temp = list[index + 1]; list.splice(index, 2, temp, row); } }, getRowList(row) { return this.treeData.filter( item => item.parentId === row.parentId || (!row.parentId && !item.parentId) ); } } }; </script> ``` --- ### 注意事项 - 需要确保数据结构中存在唯一的标识符（如 `id`），以便准确定位到对应行。 - 如果表单中有复杂嵌套层次，建议使用扁平化处理后的数据进行操作后再恢复成树形结构[^3]。 问题