前言

日常开发过程中我们可能会碰到树形数据的表格，如果仅仅是展示el-table直接就支持，加上新增、编辑等操作功能就有点麻烦了，本节就来汇总一下树形表格的操作方法。

展示

如果el-table绑定的data是树形结构，在树形数据中以children表示子节点，并且将每一项唯一标识赋值给了row-key，此时el-table会展示出树形。

所以树形表格非常简单，只要数据满足条件即可，为了更加方便地处理数据el-table有tree-props参数进行配置。

• children表示子节点的字段。该字段很有实用性，我们可以根据接口返回的数据结构进行调整，这样就不用再单独处理了。
• hasChildren表示是否包含子节点的字段。当为true表示该行是嵌套结构。注意该参数一般用于懒加载子节点数据，对于树形表示而言不需要设置该参数。

操作

表格往往会有增删改查的操作，下面我们就以新增子节点为例来讲解一下树形表格的操作思路。开发中我们可能遇到两种情况：

1. 接口保存。如果新增子节点后保存是调用接口，那么操作就会变得很简单，因为我们会在保存后直接调用查询接口刷新表格数据，完全不需要考虑后续操作的影响，直接用当前row为参数进行添加。

handleAdd(row){
const newItem = {
id: uuid(),//唯一标识
name: ''
}
if(row.children && row.children.length){
row.children.push(newItem)
} else {
// $set确保添加后的属性为响应式的
this.$set(row,'children',[newItem])
}
}

没有麻烦的处理逻辑，这就是接口的简便之处。其它操作如删除也是简便的，只要拿到当前的id调用接口即可。 2. 前端处理。当后端参数只需要传递一个处理好的list时，所有操作数据都要前端处理，这时候就会麻烦点。我们核心思路就是通过唯一标识找到list中的行数据进行操作，唯一标识就是我们前面提到的row-key。这时候就需要我们循环嵌套数据，碰到这种情况就用迭代确保所有层级都能满足。

handleNodeFromTree(tree, id) {
tree.forEach((node) => {
if (node.id === id) {
const newItem = {
id: uuid(),
name: ''
}
if (node.children && node.children.length) {
node.children.unshift(newItem)
} else {
this.$set(node, 'children', [newItem])
}
} else if (node.children && node.children.length > 0) {
this.handleNodeFromTree(node.children, id)
}
})
},

迭代思路很简单：

• id参数为当前行的唯一标识，用forEach循环树形数据
• 找不到时判断是否有子节点，存在子节点循环子节点直至找到操作行。 为了兼容其它操作，我们可以增加一个type属性，结合switch case将操作逻辑都写出来。注意当表格嵌套时index下标会算是嵌套行数，用index处理操作会很麻烦，比如顺序操作。一般我们处理排序会通过下标进行操作，在改变顺序时我们可以通过解构赋值调整顺序。

//下移
onst temp = arr[index]
;[arr[index], arr[index + 1]] = [arr[index + 1], temp]

数据嵌套时因为下标变动不能通过此方式修改顺序，还是需要迭代判断。而且改变顺序规则一般为头部不能上移，尾部不能下移，这时候我们也需要根据唯一标识进行判断才可以。

总结

以上就是树形表格操作的思路，最方便的还是用接口处理，必须前端处理时用迭代循环数据找到操作列进行操作。