项目中有用到省市区选择,我们是三个接口获取数据的,在此记录一下级联和树形的区别:

级联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             },
View Code

相关文章:

  • 2021-12-22
  • 2021-08-06
  • 2022-12-23
  • 2021-09-04
猜你喜欢
  • 2022-01-06
  • 2022-12-23
  • 2021-10-19
  • 2022-01-19
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案