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=arri.dictValue;

maps.label=arri.dictLabel;

// 网络模块子模块

if(parseInt(arri.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(arri.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;

});

}

效果:

相关推荐
用户298698530145 分钟前
React 中 Word 文档转图片的实践方案
前端·javascript·react.js
Csvn6 分钟前
异步并发控制:手写并发池、竞态防护与取消的完整方案
前端·javascript
csuzhucong7 分钟前
二十一 - 四十阶魔方
javascript·css·html
专业抄代码选手14 分钟前
06|双缓冲与 Commit:让 Fiber 支持第二次渲染
前端·javascript·react.js
天才熊猫君20 分钟前
通用虚拟滚动表格行拖拽排序:从思路到完整实现
前端·javascript
xiaominlaopodaren23 分钟前
three.js最小地图运行时(九):TileKey 线框与 cursor 坐标探针
javascript·gis·three.js
CarIise24 分钟前
JavaScript进阶与轮播图实现 课堂笔记
开发语言·javascript·笔记
专业抄代码选手25 分钟前
05|把递归渲染拆成 Fiber:让一棵大树可以暂停
前端·javascript·react.js
mayaairi29 分钟前
JS DOM节点操作完全指南:增删改查与性能优化
开发语言·javascript·性能优化
天才熊猫君31 分钟前
Vue 3 插槽机制深度解析:两条线与三层树
前端·javascript