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;
    },
相关推荐
sunly_20 分钟前
TypeScript总结:16、面向对象速查
前端·javascript·typescript
张元清24 分钟前
React useInterval Hook:没有过期闭包的 setInterval (2026)
javascript·react.js
MXN_小南学前端24 分钟前
React超长文本域中实现“返回顶部”浮动按钮
前端·javascript·react.js
言乐626 分钟前
Python游戏水平测试辅助系统2
开发语言·windows·python·游戏·django
我不是疯子是傻子38 分钟前
Qt 实时曲线卡顿优化:从QPainter到OpenGL的3级加速实战
开发语言·qt
学习嵌入式的小周38 分钟前
Notepad++8.8.7下载安装(附安装包)
前端·notepad++
zlinear数据采集卡39 分钟前
D223 ADC数据处理流水线:从原始采样值到工程单位的完整转换链
开发语言·arm开发·嵌入式硬件·fpga开发·开源·c#
gs801401 小时前
解构 Cordis:面向“时空可组合性”的 TypeScript 元框架深度剖析
前端·javascript·typescript
Highcharts.js1 小时前
Highcharts大数据渲染模块Boost实战与参数最佳实践表
javascript·数据可视化·boost·highcharts·大数据渲染·加速配置·参数表
nnerddboy1 小时前
Rust教程04:引用、借用与切片
开发语言·后端·rust