el-cascader的回显解决

最新推荐文章于 2025-03-21 13:46:23 发布

MadSnail00

最新推荐文章于 2025-03-21 13:46:23 发布

阅读量9.1k

点赞数 6

文章标签： vue.js elementui 前端

本文链接：https://blog.youkuaiyun.com/MadSnail00/article/details/134245308

版权

文章讨论了在使用ElementUI的el-cascader组件时，遇到的回显问题，即当后端接口只返回最后一个值，如何通过遍历options列表并递归获取父级节点来实现完整数据的回显。作者提供了相应的getParentsById函数作为解决方案。

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

1.el-cascader回显问题

当我们用el-casccder组件时，v-model绑定的值是一个数组，当后端接口只保留数组的最后一个值时，当我们保存后点击编辑时，回显数据时，一个值无法回显

2.解决方案

后端返回el-casccder组件绑定的最后一个值，我们的el-casccder中的options列表是有的，根据options列表我们依次找到父级的节点，组成一个数据，就可以回显成功了

// 获取某一项的所有父节点的label值 list为树形结构的数据 id为回显节点的标识
      getParentsById(list, id) {
        for (let i in list) {
          if (list[i].id == id) {//这里的list[i].id中的id根据你的需求可进行改变
            //查询到就返回该数组对象的value
            return [list[i].id];
          }
          if (list[i].children) {
            let node = this.getParentsById(list[i].children, id);
            if (node !== undefined) {
              //查询到把父节把父节点加到数组前面
              node.unshift(list[i].id);
              return node;
            }
          }
        }
      },