element ui级联选择器数据处理

后端同事返回的级联选择器数据的children是childrens,而组件渲染只识别children,所以需要props自定义传入,代码如下

html 复制代码
<el-form-item label="应用页面:" prop="appId">
              <el-cascader
                :props="{ children: 'childrens' }"
                :options="options"
                v-model="formData.appId"
                clearable
                @change="handleChangecasca2"
              ></el-cascader>
            </el-form-item>

因为后端同事最后一层对象也返回了children,但是数据是空,这时候级联的最后一层就没法选择,所以需要将最后一层对象的children设置为undefine,这样子就可以选了

this.getTreeData(this.options); //传入数据处理

js 复制代码
	
    // 递归判断列表,把最后的children设为undefined
    getTreeData(data) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].childrens.length < 1) {
          // children若为空数组,则将children设为undefined
          data[i].childrens = undefined;
        } else {
          // children若不为空数组,则继续 递归调用 本方法
          this.getTreeData(data[i].childrens);
        }
      }
      return data;
    },
相关推荐
NiceCloud喜云1 分钟前
ClaudeAPI 接入 n8n / Dify / Open WebUI 实战:Base URL 配置、调用示例与排错
开发语言·ai·chatgpt·aigc
汪汪大队u2 分钟前
Zabbix 6.0 部署踩坑记:从启动失败到 Web 成功访问
前端·zabbix
顺颂时绥_12 分钟前
new Set 过滤数据实战
前端
赵大仁2 分钟前
Next.js + Vercel AI SDK 实战:30 分钟搭出流式 Chat 页面
前端·ai·实战·react·next.js·vercel
庵中十三居士8 分钟前
【纯AI无人工修改】AI Agent从0到1实战:50行Python手写核心循环,一次看懂所有Agent框架的底层逻辑
开发语言·人工智能·python
甄同学19 分钟前
第二十篇:MCP协议集成,Claude Code如何扩展AI Agent的能力边界
开发语言·人工智能·qt
云空1 小时前
《Three.js 完整版3D魔方:带贴纸+中心固定+自动求解复原》
前端·javascript·3d·three.js
酸梅果茶1 小时前
【7】lightning_lm项目-LIO 前端 -IVox 局部地图
前端·slam
@atweiwei1 小时前
Langchainrust:中LLM-as-a-Judge,用 Rust 实现一套 LLM 评估系统
开发语言·后端·ai·rust·llm·rag
风华圆舞1 小时前
鸿蒙HarmonyOS 多模态输入实战 —— 图片与文档输入智谱/DeepSeek
开发语言·人工智能·华为·php·harmonyos·arkts·arkui