el-tree修改时给后端返回子父节点的key，并且回显数据的时候，子节点未全部选中的父节点呈现半选的状态

具体需求如下：后端要求除了返回子节点的id，也要求返回父节点id，因为之前前后端约定的是只要子节点的id，不管父节点，现在需求有变，把子父节点的id一起塞到一个数组里面，然后返回给后端就行了

首先看rel-tree的使用

<el-tree
   ref="tree"
   :data="list"
   show-checkbox
   node-key="id"
   :default-checked-keys="defaultCheckedKeys"
   :default-expanded-keys="defaultCheckedKeys"
   :props="props"
/>

现在开始修改

修改前

getCheckedKeys() {
   return this.$refs.tree.getCheckedKeys()
}

this.$refs.tree.getCheckedKeys()里面就是所有子节点id的数组

修改后

getCheckedKeys() {
   return this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())
}

原理就是用concat直接将this.$refs.tree.getHalfCheckedKeys()获取的半选中节点的数组和前面子节点的数组连接再一起返回！

点击确定按钮就可以直接调上面的方法获取数据了，如下

<el-button type="primary" @click="submit">确 定</el-button>

submit() {
  const keys = this.getCheckedKeys()
  //keys是一个数组，里面是被勾选的子节点和父节点的id，下面就可以调用后端接口进行操作啦...
},

但是这样有个问题，回显的时候由于有了父节点的id，会导致该父节点里面的子节点不管选没选上都会被勾上，这个时候就可以利用el-tree的check-strictly属性，该属性是控制父子节点是否互相关联，默认为false

我们只需要将这个值初始化为true，在回显的时候这个属性变为false，修改数据提交，关闭弹窗的时候又变回true即可，代码如下：

然后还要对默认勾选default-checked-keys和默认展开default-expanded-keys两个属性中的内容监听修改一下，因为此时半选状态的父节点会直接显示勾选状态，具体代码如下：

watch: {
    value(newVal) {
      this.list = newVal
      this.checkStrictly = false
    },
    defaultCheckedKeys(newVal) {
      const arr = []
      this.$nextTick(() => {
        newVal.forEach((id) => {
          if (!this.$refs.tree.getNode(id)?.data.childPermission || 
              !this.$refs.tree.getNode(id)?.data.childPermission.length) {
              arr.push(id)
          }
            this.$refs.tree.setCheckedKeys(arr)
        })
      })
    }
  }

这一段涉及到的数据的定义可能各不相同，可以打印看看再判断，在此介绍的就是在这种需求下的操作办法，和可能遇见的问题及解决的思路，希望对你有帮助！