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;
    },
相关推荐
后台开发者Ethan5 分钟前
setState组件更新
前端·javascript·react
汤米粥5 分钟前
Python爬虫中Xpath用法之——normalize-space()
开发语言·python
谙忆102410 分钟前
大文件上传实战:前端分片、断点续传、秒传与并发控制怎么落地
前端
科技道人15 分钟前
记录 设置-显示大小和字体
开发语言·android设置·字体和显示大小
浮江雾23 分钟前
Flutter第三节----Dart中的数据类型
android·开发语言·学习·flutter·入门·函数
weixin_4223293128 分钟前
AgentScope Java 项目入门 & Builder 深度解读
java·开发语言·人工智能
轻动琴弦37 分钟前
VoltTool —— 一站式在线开发者工具平台,69+实用工具免费使用
前端·chrome
就叫飞六吧39 分钟前
不同站点iframe嵌套种cookie、localstorege.set() 关系
前端
星栈41 分钟前
LiveView 怎么测:从组件测试到端到端,我终于不再只敢手点页面了
前端·前端框架·elixir
chh56344 分钟前
C++--list
开发语言·数据结构·c++·学习·算法·list