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

 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 },

选择1 {{ option.text }} 选择2 {{ option.text }}