VUE + Element-UI 使用Cascader 级联选择器，后端返回的字段和我们需要的不一致怎么办？

最新推荐文章于 2025-05-23 21:30:00 发布

昨夜太平长安888

最新推荐文章于 2025-05-23 21:30:00 发布

阅读量4.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Vue Element-UI 文章标签： vue ELement-UI cascader级联选择器

本文链接：https://blog.youkuaiyun.com/HelloWord176/article/details/109569542

Vue 同时被 2 个专栏收录

59 篇文章

订阅专栏

Element-UI

14 篇文章

订阅专栏

本文介绍如何正确配置Element UI的级联选择器组件，解决不同数据格式问题，并演示如何获取选中项及处理多级选择。

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

我们先看 Cascader 级联选择器官方文档提供的数据格式：

      options: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致",
                },
                {
                  value: "fankui",
                  label: "反馈",
                },
                {
                  value: "xiaolv",
                  label: "效率",
                },
                {
                  value: "kekong",
                  label: "可控",
                },
              ],
            },
          ],
        },
      ],

而一般后台给我们返回的数据格式是这样的：

      data: [
        {
          id: 1,
          children: [
            {
              id: 2,
              children: [
                {
                  id: 6,
                  children: null,
                  label: "测试组",
                },
              ],
              label: "研发部",
            },

            {
              id: 4,
              children: null,
              label: "商务部",
            },
          ],
          label: "万物互联",
        },
      ],

跟官方文档要求的完全不一样，这样就会在使用的过程中出现一系列的问题：（比如下面这个）

选中一个直接全部选中，这显然不是我们想要的那种结果，那怎么办呢？？？？

我们只能通过改变后台返回的数据来实现想要的功能，我们可以给el-cascader 绑定 props（:props="optionProps"）属性来进行设置：

        <el-cascader
          ref="cascader"
          v-model="values"
          :options="options"
          @change="handleChange"
          :props="optionProps"
          :show-all-levels="false"
        ></el-cascader>

在data中：

// 使用Cascader 级联选择器后台返回的数据和要求的不一致时，做出相应改变
optionProps: {
    value: "id",
    label: "label",
    children: "children",
},

这样就完美的解决了上面所出现的问题：

如果只想选中最后一级，只需要加上这个属性就可以了：:show-all-levels="false"

如果想要获取当前选中的对象，文档中并没有提供直接获取当前选择的Object

这里特别需要注意element-ui的版本问题

2.7.0版本之前

可以用this.$refs['cascader'].currentLabels获取选中节点

        <el-cascader
          ref="cascader"
          v-model="values"
          :options="options"
          @change="handleChange"
          :props="optionProps"
          :show-all-levels="false"
        ></el-cascader>

    handleChange(value) {
      let nodesObj = this.$refs['cascader'].currentLabels
      console.log(nodesObj);
    },

这里着重说一下 2.7.0版本之后

可以用this.$refs['cascader'].getCheckedNodes()获取选中节点

this.$refs['cascader'].currentLabels在2.7版本给移除了可以通过this.$refs['件名'].getCheckedNodes()获取到选中的节点

        <el-cascader
          ref="cascader"
          v-model="values"
          :options="options"
          @change="handleChange"
          :props="optionProps"
          :show-all-levels="false"
        ></el-cascader>

    handleChange(value) {
      let nodesObj = this.$refs["cascader"].getCheckedNodes();
      console.log(nodesObj);
      console.log(nodesObj[0].data); //打印当前选中的节点的信息
      console.log(nodesObj[0].data.id);
    },

可以选择其中某一级的：

级联选择器默认只能选择最后一级的，想要选择任意一级，我们可以在属性设置时加上：checkStrictly: true 或加上属性 change-on-select（不推荐）

推荐：（在data中写）

      optionProps: {
        value: "id",
        label: "label",
        children: "children",
        checkStrictly: true // 可选择任意一级
      },

不推荐element已废弃

                <el-cascader
                  v-model="temperatureFrom.options.organizationId"
                  :options="options"
                  ref="cascader"
                  @change="handleChange"
                  size="small"
                  :props="optionProps"
                  change-on-select
                  clearable
                ></el-cascader>

当你给你的层级选择器写上 clearable 属性之后，可以清空输入框内的内容但是有时候你会发现引起一系列的报错：（比如这样）

这是因为你点击清楚数据之后，里面数据是空，但是我后面又调用里面的数据，所以才会报错：不过我们可以对先对齐进行判断一下：

    handleChange(value) {
      // console.log(value)
      let nodesObj = this.$refs["cascader"].getCheckedNodes();
        // this.normalHearForm.organizationId = nodesObj[0].data.id;
      if (nodesObj.length != 0) {
        this.normalHearForm.organizationId = nodesObj[0].data.id;
        console.log(this.normalHearForm.organizationId);
      } else {
        this.normalHearForm.organizationId = 0;
      }
    },

这样就好了！！！