vue中Cascader 级联选择器实现-修改实现

vue 的cascader研究了好长时间,看了官网给的示例,上网查找了好多信息,才解决修改时回显的问题,现将方法总结如下:

vue代码:

<el-form-item label="芯片" prop="firmware">

<el-cascader

ref="cascader"

:options="firmwareTypeOptions"

v-model="form.firmware"

placeholder="请选择固件版本类型" style="width:100%"></el-cascader>

</el-form-item>

js:

data中:

// 父节点

firmwareTypeOptions:null,

firmwareMaps: {

value:null,

label: null,

children: null

}

---------------------------方法实现-------------------------

getDictsOne(){

getDicts(this.inverterFirmwareVersionType).then(response => {

// 定义数组

const nodes=[];

var arr=response.data;

for(let i = 0; i <arr.length; i++) {

let maps=[];

// 赋值

maps.value=arr[i].dictValue;

maps.label=arr[i].dictLabel;

// 网络模块子模块

if(parseInt(arr[i].dictValue)===1){

getDicts(this.inverterFirmwareNetworkModule).then(response => {

const nodess =response.data.map((i, index) => ({

value: i.dictValue,

label: i.dictLabel,

}));

maps.children=nodess;

});

}

// 主控模块子模块

if(parseInt(arr[i].dictValue)===2){

getDicts(this.inverterFirmwareMainModule).then(response => {

const nodess =response.data.map((i, index) => ({

value: i.dictValue,

label: i.dictLabel,

}));

maps.children=nodess;

});

}

nodes.push(maps);

}

this.firmwareTypeOptions=nodes;

});

}

效果:

相关推荐
重生之我要当java大帝6 分钟前
java微服务-尚医通-数据字典-5
vue.js·微服务·云原生·架构
Mintopia24 分钟前
🎨 AIGC 内容过滤技术:当创作的洪流遇上理性的堤坝
前端·javascript·aigc
Shi_haoliu39 分钟前
Vue2 + Office Add-in关于用vue项目于加载项控制excel单元格内容(Demo版)
前端·javascript·vue.js·node.js·html·excel·office
计算机毕业设计木哥1 小时前
计算机毕业设计选题推荐:基于SpringBoot和Vue的爱心公益网站
java·开发语言·vue.js·spring boot·后端·课程设计
aesthetician5 小时前
Node.js v25 重磅发布!革新与飞跃:深入探索 JavaScript 运行时的未来
javascript·node.js·vim
知识分享小能手7 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
demi_meng8 小时前
reactNative 遇到的问题记录
javascript·react native·react.js
MC丶科9 小时前
【SpringBoot 快速上手实战系列】5 分钟用 Spring Boot 搭建一个用户管理系统(含前后端分离)!新手也能一次跑通!
java·vue.js·spring boot·后端
千码君20169 小时前
React Native:从react的解构看编程众多语言中的解构
java·javascript·python·react native·react.js·解包·解构
90后的晨仔11 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js