前端小记--3.接上篇，级联组件el-cascader回显问题_根据子节点找全部父 ,el-cascader树形结构回显-CSDN博客

本文链接：https://blog.csdn.net/u012830884/article/details/134748839

本文讲述了在使用Vue的el-cascader组件时，如何处理选中节点及其父节点的值问题，以便与后端接口保持一致。开发者需获取选中节点的ID数组并处理后端返回的数据，以实现前端数据回显。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用el-cascader这个级联组件时，组件的值是数组形式，且选中节点时，所返回的值中是包含选中节点的所有父节点的。

比如，我们选中的是“值班点1号-东门”，但组件实际的值是[‘值班点1号’,‘值班点1号-东门’]，包含了上级父节点。这与后端接口就不匹配，一般后端存储的时候，只存储选中节点，返回数据也是只有选中的节点，这就导致数据回显问题。
在这里插入图片描述
此时，我们就要传给后端所选节点的数组，回显时就需要前端手动处理，根据给定的节点id，来查找其所有父节点id，以此实现页面数据回显。

1.获取所有所选节点，传给后端存储

let checkedNodes = this.$refs.checkCascader.getCheckedNodes() || [];
let checkedIds = checkedNodes.map((el) => {
    return el.value;
});
console.log('所有选中节点的id', checkedIds);

2.后端返回数据，前端进行处理回显

for (let item of self.editForm.checkpoints) {
    checkpoints.push(
	this.getParentIdsList(item, this.checkpointTree));
}
//回显打卡点数据
this.checkpoints = checkpoints;

//根据id递归查找所有父级ids
getParentIdsList(id, tree) {
      let arr = [];
      for (let i = 0; i < tree.length; i++) {
        let item = tree[i];
        arr = [];
        arr.push(item.checkpoint.id);
        if (id === item.checkpoint.id) {
          return arr;
        } else {
          if (item.children && item.children.length > 0) {
            arr = arr.concat(this.getParentIdsList(id, item.children));
            if (arr.includes(id)) {
              return arr;
            }
          }
        }
      }
    }