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;
    },
相关推荐
工程师0078 分钟前
C#中的AutoUpdater自动更新类
开发语言·c#·自动更新开源库·autoupdate
css趣多多8 分钟前
props,data函数,computed执行顺序
前端·javascript·vue.js
一个不称职的程序猿9 分钟前
构建优雅的 Vue.js 表情包选择器:一个功能丰富且可定制的 Emoji Picker 组件
前端·javascript·vue.js
lsx20240611 分钟前
Java 泛型
开发语言
无风听海15 分钟前
AngularJS中$q.when()的用法
javascript·ecmascript·angular.js
Charlie_lll16 分钟前
学习Three.js--光源Light+轨道控制器OrbitControls
前端·three.js
jghhh0125 分钟前
基于MATLAB的可见光通信系统仿真实现
开发语言·matlab
xiaoqider35 分钟前
C++模板进阶
开发语言·c++
yaonoran36 分钟前
【无标题】
java·开发语言·变量
康小庄41 分钟前
浅谈Java中的volatile关键字
java·开发语言·jvm·spring boot·spring·jetty