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;

});

}

效果:

相关推荐
栀秋666几秒前
就地编辑功能开发指南:从代码到体验的优雅蜕变
前端·javascript·代码规范
国服第二切图仔2 分钟前
Electron for 鸿蒙PC项目实战案例 - 连连看小游戏
前端·javascript·electron·鸿蒙pc
用户841794814564 分钟前
vxe-table 使用 spanMethod 合并卡顿的解决方案
vue.js
社恐的下水道蟑螂9 分钟前
深度探索 JavaScript 的 OOP 编程之道:从基础到进阶
前端·javascript·架构
临江仙45512 分钟前
Vite 性能优化实战:从 0 到 1 打造极速开发体验(附完整配置)
vue.js·vite
学习路上_write13 分钟前
FREERTOS_任务通知——使用
java·前端·javascript
之恒君14 分钟前
v8源码:PromiseResolveThenableJobTask 是如何被创建和执行的?
javascript
www_stdio15 分钟前
深入理解 Promise 与 JavaScript 原型链:从基础到实践
前端·javascript·promise
q_191328469538 分钟前
基于Springboot2+Vue2的旅游景点购票系统
java·vue.js·spring boot·后端·mysql·毕业设计·计算机毕业设计
Tzarevich39 分钟前
JavaScript 作用域与执行机制:从变量提升到块级作用域的演进
javascript·v8