vue+ElementUI 级联选择器根据最后一级选中的值回显整个选中的数组

最新推荐文章于 2024-08-20 09:57:11 发布

马飞飞X

最新推荐文章于 2024-08-20 09:57:11 发布

阅读量3.2k

点赞数

文章标签： elementui vue.js 前端

本文链接：https://blog.csdn.net/xxf995546883/article/details/125178489

版权

该博客主要介绍了如何在Vue项目中使用ElementUI的级联选择器，当用户点击树形结构的最后一级时，获取其ID并回显在编辑弹窗的级联选择器上展示完整的路径。文章提到了`orgListArr`作为接口返回的数据，并展示了`getPath`方法，该方法接收树结构数据和目标ID，返回级联选择器所需的完整路径数组。

摘要由CSDN通过智能技术生成

需求：点击树形结构的最后一级获取到对应的值（id——也可以是是其他属性),需要在编辑弹窗中的级联选择器上显示整个的路径

弹窗

html

<el-form-item label="组织">
        <el-cascader
          v-model="organizationNew"
          :options="orgListArr"
          :props="optionProps"
          @change="handleChange"
        ></el-cascader>
      </el-form-item>

data

 orgListArr: [],
  optionProps: {
        label: 'deptName',
        value: 'id',
        children: 'children',

        checkStrictly: true, // 取消关联可以选择任意一级
  },

orgListArr 接口返回的