Cascader级联选择器，通过子节点，回显父级及祖先级节点！

最新推荐文章于 2025-06-26 09:31:25 发布

原创最新推荐文章于 2025-06-26 09:31:25 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文介绍了在Vue项目中，如何处理Cascader级联选择器与树形数据的回显问题，包括新增和编辑时后端接口的交互，以及如何通过递归方法获取节点及其祖先节点的值。

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

做后台管理系统的同学们，想必对Cascader级联选择器不会感到陌生，这个组件大多数会与树关联结合，实现对部门人员的分配等操作！这个操作前端的难点大多数是在Cascader与树的回显部分！

一般新增给后端传值的时候，保存当前人员的value或者唯一标识，而编辑回显的时候后端基本上也是将我们保存的值通过节后返回，这个时候我们就要通过返回的Id或者唯一标识，拿到当前树的节点及其祖先级节点，通过处理数据的方式，将值转化为el-Cascader的所需要回显的值！

话不多说直接上代码！

<template>
  <new-container>
 
    <el-cascader
      size="small"
      readonly
      filterable
      :props="{
        multiple: true,
      }"
      ref="auditCascader"
      v-model="auditArr"
      :options="DeptTree"
      :show-all-levels="false"
      clearable
    ></el-cascader>
  </new-container>
</template>
   
<script>
export default {
  name: "",
  data() {
    return {
     //树的值
      DeptTree: [
        {
          value: "1",
          label: "目录1",
          children: [
            {
              value: "1.1",
              label: "目录1.1",
              children: [
                {
                  value: "1.1.2",
                  label: "目录1.1.2",
                  title: "三级目录",
                },
                {
                  value: "1.1.1",
                  label: "目录1.1.1",
                  title: "三级目录",
                },
              ],
              title: "二级目录",
            },
            {
              value: "1.2",
              label: "目录1.2",

              title: "二级目录",
            },
          ],
          title: "一级目录",
        },
        {
          value: "2",
          label: "目录2",
          children: [
            {
              value: "2.1",
              label: "目录2.1",
              children: [
                {
                  value: "2.1.1",
                  label: "目录2.1.1",
                },
                {
                  value: "2.1.2",
                  label: "目录2.1.2",
                },
              ],
            },
            {
              value: "2.2",
              label: "目录2.2",
              children: [
                {
                  value: "2.2.1",
                  label: "目录2.2.1",
                },
              ],
            },
          ],
        },
        {
          value: "3",
          label: "目录3",
          children: [
            {
              value: "3.1",
              label: "目录3.1",
              children: [
                {
                  value: "3.1.1",
                  label: "目录3.1.1",
                },
              ],
            },
          ],
        },
        {
          value: "4",
          label: "目录4",
          children: [
            {
              value: "4.1",
              label: "目录4.1",
              children: [],
            },
            {
              value: "4.2",
              label: "目录4.2",
              children: [
                {
                  value: "4.2.1",
                  label: "目录4.2.1",
                },
              ],
            },
          ],
        },
      ],
      auditArr:[],
    };
  },

  mounted() {
    const targetValue = ['2.1.2','4.2.1','3.1.1'];
    this.auditArr=targetValue.map(item=>this.getParentList('value',item,this.DeptTree))
 
  },
  methods: {
    getParentList(keyNmame, code, tree) {

      // console.log('code =>', code);
      let arr = []; //要返回的数组
      for (let i = 0; i < tree.length; i++) {
        let item = tree[i];
        arr = [];
        arr.push(item[keyNmame]); //保存当前节点id
        if (code==item[keyNmame]) {
          //判断当前id是否是默认id
          return arr; //是则退出循环、返回数据
        } else {
          //否则进入下面判断，判断当前节点是否有子节点数据
          if (item.children && item.children.length > 0) {
            //合并子节点返回的数据
            arr = arr.concat(this.getParentList(keyNmame, code, item.children));
            if (arr.includes(code)) {
              //如果当前数据中已包含默认节点，则退出循环、返回数据
              return arr;
            }
          }
        }
      }
    },
  },
};
</script>
   
<style scoped ></style>

需要的同学可以把代码直接粘贴到自己demo中，验证使用！