elementUI Cascader 级联选择器获取数据信息

最新推荐文章于 2025-07-21 17:26:35 发布

Dreamer_xr

最新推荐文章于 2025-07-21 17:26:35 发布

阅读量2.7w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： elementUI Cascader级联选择器 el-cascader

本文链接：https://blog.csdn.net/xr510002594/article/details/86245903

本文介绍了如何在elementUI中使用Cascader组件，并通过示例展示了利用getCascaderObj方法获取选定选项的数据。在实践中，发现从selectedOptions和goodsOptions获取的数据存在差异，需要进行适配处理，包括value和class的对应。

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

官方API： http://element-cn.eleme.io/#/zh-CN/component/cascader

<el-cascader :options="goodsOptions" v-model="selectedOptions" @change="handleChange()" :props="defaultData" size="mini" style="width: 300px"></el-cascader>

//goodsOptions为渲染数据
//defaultData:{   //联级选择
    value: 'id',
    label: 'name',
    children: 'class'
 },

function getCascaderObj(val,opt) {
    return val.map(function (value, index, array) {
      for (var itm of opt) {
        // console.log(opt)
        if (itm.id == value) { opt = itm.class; return itm; }
      }
      return null;
    });
  }