el-cascader遍历修改键名，实现联级查找

kkkkkkkkira

已于 2022-06-07 14:55:20 修改

阅读量643

点赞数 1

分类专栏：一些小问题 el 文章标签： javascript vue.js 前端

于 2022-06-02 17:28:21 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44099060/article/details/125104362

版权

一些小问题同时被 2 个专栏收录

5 篇文章

订阅专栏

3 篇文章

订阅专栏

这篇博客讲述了如何在Vue应用中，使用自定义函数将接收到的name和id键名转换为el-cascader组件所需的value和label键名。通过遍历数据并递归构造新的树形结构，实现了数据适配。同时，展示了如何在change事件中获取并处理选定的值。

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

1.效果图

在这里插入图片描述

2.需求描述

el-cascader中提供数的节点名称是value和label，而我现在拿到的是name和id，要把这两个键名改成el-cascader需要的，即把这样
在这里插入图片描述
改成这样

3.实现

ref用于后续获取该节点

<el-cascader
   v-model="areaName"
   ref="cascader"
   :options="treeData"  
   :props="{ expandTrigger: 'hover' }"
   @change="handleChange"
/>

// 获取地区树联级数据
getTeeData() {
  const mapTree = org => {
  // 给需要的键名赋值的方法
    const haveChildren = Array.isArray(org.children) && org.children.length > 0
    return {
      label: org.name,
      value: org.id,
      // 没有子节点了就置空，不然还有空白的节点展示在选择项中占位
      children: haveChildren ? org.children.map(i => mapTree(i)) : null 
    }
  }
  tree.getAreaTree().then((res) => {
    this.treeData = res.map(org => mapTree(org))
  })
},

handleChange(value) {
  // 得到所有经过的节点的value构成的数组，但我只需要最后一个子节点的value
  this.formInline.areacode = value[value.length - 1] 
  this.formInline.areaname = this.$refs.cascader.getCheckedNodes()[0].label
}