vue中使用elementui级联组件常见的数据处理问题

最新推荐文章于 2025-06-10 17:01:28 发布

weixin_42554311

最新推荐文章于 2025-06-10 17:01:28 发布

阅读量2.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： FQ vue

本文链接：https://blog.youkuaiyun.com/weixin_42554311/article/details/98050041

vue 同时被 2 个专栏收录

12 篇文章

订阅专栏

3 篇文章

订阅专栏

本文介绍在项目中遇到的ElementUI级联组件数据处理问题。当从后台获取的数据缺少label和value字段时，页面无法正常显示。通过递归方法为每个节点添加label和value属性，解决显示问题。

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

最近项目中遇到一个问题，使用elementui级联组件与后台联调是返回的数据里面没有label和value,这时页面不会显示，在不改变原生组件的情况下，我们可以利用递归对数据进项处理，每个里面都加上label和value。

methods(){
findChildren(node) {
      node.forEach((ele, index) => {
        const children = ele.children;
        ele.value = ele.code;
        ele.label = ele.name;
        if (children) {
          this.findChildren(children);
        }
      });
    }
}

在相应的地方调用此方法，把要处理的数据传进去，例如我的业务是在调用接口后请求的时候对数据进行处理

      postDictoryData1(param).then(data => {
        console.log("栏目获取词条", data);
        this.findChildren(data.entityList);
        this.wordEntryList = data.entityList;
        console.log("citiooo", this.wordEntryList)
      });