element el-cascader实现懒加载省市区多级联选

官方的demo

1.  
   <el-cascader :props="props"></el-cascader>
2.  
    
3.  
   <script>
4.  
   let id = 0;
5.  
    
6.  
   export default {
7.  
   data() {
8.  
   return {
9.  
   props: {
10.  
    lazy: true,
11.  
    lazyLoad (node, resolve) {
12.  
    const { level } = node;
13.  
    setTimeout(() => {
14.  
    const nodes = Array.from({ length: level 1 })
15.  
    .map(item => ({
16.  
    value: id,
17.  
    label: `选项${id}`,
18.  
    leaf: level >= 2
19.  
    }));
20.  
    // 通过调用resolve将子节点数据返回，通知组件数据加载完成
21.  
    resolve(nodes);
22.  
    }, 1000);
23.  
    }
24.  
    }
25.  
    };
26.  
    }
27.  
    };
28.  
    </script>

思路就是level就是层级关系，0就是1级列表，再将获取到的数组定义为value和label，再将leaf设为false。然后将获取到的数据回调给方法resolve。最后node里面的value就是你选择的所有value的数组了。

 注意 ：最后一级设为true就不会继续加载了 而是回显到上面的选择框上。

下面看真实的demo

1.  
   <el-form-item label="关联区域代码" label-width="120px">
2.  
   <el-cascader v-model="form.areaCode" :props="props"></el-cascader>
3.  
   </el-form-item>

引入获取省市区镇的列表的接口方法。 

import { getProvinceList, getCityList, getCountyList, getTownList } from '@/api/area';

1.  
   export default {
2.  
   data() {
3.  
   return {
4.  
   props: {
5.  
   lazy: true,
6.  
   lazyLoad(node, resolve) {
7.  
   const { level } = node;
8.  
   if (level == 0) {
9.  
   getProvinceList().then((res) => {
10.  
    if (res.code == 200) {
11.  
    var data = res.data;
12.  
    var nodes = data.map(item => {
13.  
    return {
14.  
    value: item.code,
15.  
    label: item.name,
16.  
    leaf: false
17.  
    };
18.  
    });
19.  
    resolve(nodes);
20.  
    }
21.  
    })
22.  
    } else if (level == 1) {
23.  
    getCityList(node.value).then((res) => {
24.  
    if (res.code == 200) {
25.  
    var data = res.data;
26.  
    var nodes = data.map(item => {
27.  
    return {
28.  
    value: item.code,
29.  
    label: item.name,
30.  
    leaf: false
31.  
    };
32.  
    });
33.  
    resolve(nodes);
34.  
    }
35.  
    })
36.  
    } else if (level == 2) {
37.  
    getCountyList(node.value).then((res) => {
38.  
    if (res.code == 200) {
39.  
    var data = res.data;
40.  
    var nodes = data.map(item => {
41.  
    return {
42.  
    value: item.code,
43.  
    label: item.name,
44.  
    leaf: false
45.  
    };
46.  
    });
47.  
    resolve(nodes);
48.  
    }
49.  
    })
50.  
    } else if (level == 3) {
51.  
    getTownList(node.value).then((res) => {
52.  
    if (res.code == 200) {
53.  
    var data = res.data;
54.  
    var nodes = data.map(item => {
55.  
    return {
56.  
    value: item.code,
57.  
    label: item.name,
58.  
    leaf: true
59.  
    };
60.  
    });
61.  
    resolve(nodes);
62.  
    }
63.  
    })
64.  
    }
65.  
    },
66.  
    }
67.  
    }
68.  
    },
69.  
    mounted() {
70.  
     
71.  
    },
72.  
    methods: {
73.  
     
74.  
    }
75.  
    }

 效果如下：

这篇好文章是转载于：学新通技术网