项目中有用到省市区选择,我们是三个接口获取数据的,在此记录一下级联和树形的区别:
级联HTML:
<el-cascader :props="region"></el-cascader>
级联JS:
1 region: { 2 lazy: true, 3 lazyLoad(node, resolve){ 4 if(node.level === 0){ 5 getProvince().then(val =>{ 6 if (val.code == 200) { 7 const nodes = val.data.map(res =>({ 8 label: res.name, 9 level: node.level, 10 value: res 11 })) 12 resolve(nodes) 13 } 14 }).catch(val=>{ 15 console.log(val) 16 }) 17 }else if(node.level === 1){ 18 getCity(node.data.value.provinceId).then(value =>{ 19 const nodes = value.data.map(res => ({ 20 label: res.name, 21 level: node.level, 22 value: res 23 })) 24 resolve(nodes) 25 }) 26 }else if(node.level === 2){ 27 getCountry(node.data.value.cityId).then(value => { 28 const nodes = value.data.map(res => ({ 29 label: res.name, 30 leaf: node.level, 31 value: res 32 })) 33 resolve(nodes) 34 }) 35 }else if(node.leve === 3){ 36 resolve([]) 37 } 38 } 39 },