Vue动态数据实现|Vue动态数据实现 el-select 多级联动、数据回显方式 Vue动态数据实现el-select多级联

动态数据 el-select 多级联动、数据回显
多级联动select菜单（易懂）

动态数据 el-select 多级联动、数据回显

文章图片

【Vue动态数据实现|Vue动态数据实现 el-select 多级联动、数据回显方式】 父组件

import ProviderCategory from './ProviderCategory'

子组件

//测试模拟数据childNodes = [{categoryImg: "https://www.baidu.com/img/bd_logo1.png",categoryName: "上衣",id:2,pId: 1,sort: 1,childNodes: [{categoryImg: "https://www.baidu.com/img/bd_logo1.png",categoryName: "短袖",haveGoods: true,id: 5,pId: 2,sort: 1,childNodes:[{id:111,pId: 5,sort: 1,categoryImg: "https://www.baidu.com/img/bd_logo1.png",categoryName: "短袖裤子",childNodes: []},{id:122,pId: 5,sort: 1,categoryImg: "https://www.baidu.com/img/bd_logo1.png",categoryName: "短袖鞋子",childNodes: []}],},{categoryImg: "https://www.baidu.com/img/bd_logo1.png",categoryName: "西装",haveGoods: false,id: 6,pId: 2,sort: 1,childNodes:[{id:112,pId: 6,sort: 1,categoryImg: "https://www.baidu.com/img/bd_logo1.png",categoryName: "西装裤子",childNodes: []},{id:121,pId: 6,sort: 1,categoryImg: "https://www.baidu.com/img/bd_logo1.png",categoryName: "西装鞋子",childNodes: []}],}]},{id:11,pId: 1,sort: 1,categoryImg: "https://www.baidu.com/img/bd_logo1.png",categoryName: "裤子",childNodes: [{categoryImg: "https://www.baidu.com/img/bd_logo1.png",categoryName: "牛仔",haveGoods: true,id: 112222,pId: 11,sort: 1,childNodes:[],},]},{id:12,pId: 1,sort: 1,categoryImg: "https://www.baidu.com/img/bd_logo1.png",categoryName: "鞋子",childNodes: [{categoryImg: "https://www.baidu.com/img/bd_logo1.png",categoryName: "耐克",haveGoods: true,id: 1121,pId: 12,sort: 1,childNodes:[{categoryImg: "https://www.baidu.com/img/bd_logo1.png",categoryName: "西牛仔",haveGoods: true,id: 11211,pId: 1121,sort: 1,childNodes:[],},],},{categoryImg: "https://www.baidu.com/img/bd_logo1.png",categoryName: "阿迪",haveGoods: true,id: 1122,pId: 12,sort: 1,childNodes:[],},]}];

//数据回显findId(arr, id) { //将选中的数组和id组成一个数组 for (let i = 0; i < arr.length; i++) {if (arr[i].id === id) {return [[arr, i]]break}}let c = []arr.forEach((item, i) => {let r = this.findId(item.childNodes || [], id)if (r && r.length) {c = [[arr, i]].concat(r)}})// console.log(c,"回显数据")return c},

多级联动select菜单（易懂）

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。