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;

});

}

效果:

相关推荐
千里码aicood24 分钟前
springboot+vue考研复习交流平台设计(源码+文档+调试+基础修改+答疑)
vue.js·spring boot·后端
lcc1871 小时前
Vue VueComponent
前端·vue.js
摇滚侠1 小时前
Vue 项目实战《尚医通》,预约挂号就诊人组件搭建上,笔记40
前端·javascript·vue.js·笔记
前端互助会5 小时前
Live2D形象展示与文本语音播报:打造生动交互体验的完整实现
前端·vue.js·microsoft·交互
chilavert3187 小时前
技术演进中的开发沉思-191 JavaScript: 发展历程(上篇)
开发语言·javascript·ecmascript
武昌库里写JAVA7 小时前
微擎服务器配置要求,微擎云主机多少钱一年?
java·vue.js·spring boot·后端·sql
dy17177 小时前
el-table表头上下显示内容
javascript·vue.js·elementui
亮子AI8 小时前
给你的应用加上Google账号登录
javascript
努力往上爬de蜗牛8 小时前
react native 实现选择图片或者拍照上传(多张)
javascript·react native·react.js
谢尔登9 小时前
【React】React组件的渲染过程分为哪几个阶段?
前端·javascript·react.js