elementUI级联选择器--根据第一级数据请求第二级数据的接口

<template>
	<el-cascader
        ref="areas"
        v-model="selectedHost"
        :options="hostOptions"
        :props="hostProps">
     <template slot-scope="{ node, data }">
         <span @click="changeCascader(node,data)" style="display:block;" :key = "data.label">{{ data.label }}</span>
     </template>
 </el-cascader>
</template>

<script>
export default {
    name: "ThreeClearHome",
    data: function() {
        return {
            selectedHost: ["1", 3], //默认展示
            hostOptions: [],
            hostProps: {
                lazy: true,
                lazyLoad: (node, resolve) => {
                    if (node.data) {
                        this.getHostVersion(node, node.data.value, resolve);
                    }
                }
            }, //学段年级筛选
          	periodList: [{name: '小学', value: 'primary', schoolLevel: '1'}, {name: '初中', value: 'junior', schoolLevel: '2'}, {name: '高中', value: 'high', schoolLevel: '4'}],
        };
    },
    props: {
    },
    computed: {
    },
    components: {
    },
    watch: {
    },
    methods: {
       	/*
			data结构示例
			{
				success: true,
				"classLevels":[
			        {
			            "classLevel":1,
			            "chClassLevel":"一年级"
			        },
			        {
			            "classLevel":2,
			            "chClassLevel":"二年级"
			        },
			        {
			            "classLevel":3,
			            "chClassLevel":"三年级"
			        },
			        {
			            "classLevel":4,
			            "chClassLevel":"四年级"
			        },
			        {
			            "classLevel":5,
			            "chClassLevel":"五年级"
			        }
			    ]
			}
		*/
        
        loadSearchData(node, schoolLevel) {
            const vm = this;
            $.get(`接口地址`, {
                schoolLevel: schoolLevel,
            }).done(function(data) {
                if (data.success) {
                    vm.clazzLevelList = data.classLevels || [];
                    let newPeriodList = vm.periodList.map((item) => {
                        return {
                            value: item.schoolLevel,
                            label: item.name,
                            leaf: false,
                            children: []
                        };
                    });
                    if (vm.clazzLevelList.length > 0) {
                        let arr = vm.clazzLevelList.map((item) => {
                            return {
                                value: item.classLevel,
                                label: item.chClassLevel,
                                leaf: true
                            };
                        });
                        newPeriodList.filter(item => {return item.value === schoolLevel;})[0].children = arr;
                    } else {
                        newPeriodList.filter(item => {return item.value === schoolLevel;})[0].children = [];
                    }
                    vm.hostOptions = newPeriodList;
                } else {
                    vm.$alert(data.info || "接口请求错误");
                }
            }).fail(function(e) {
                vm.$alert("网络错误");
            });
        },

        /*切换学段年级*/
        changeCascader(node, $event) {
            let vm = this;
            let el_node = document.querySelectorAll('.el-cascader-menu');
            if (el_node[node.level] && el_node.length > 0) {
                el_node[node.level].style.display = "block";
            }
            //最后一级不再请求接口
            if ($event.leaf) {
                vm.formClazzLevel = $event.value;
                vm.formChClazzLevel = $event.label;
                return false;
            }
            vm.loadSearchData(node, $event.value);
        },
        getHostVersion(node, v, resolve) {
            let el_node = document.querySelectorAll('.el-cascader-menu');

            let arr = [];
            if (this.clazzLevelList.length > 0) {
                arr = this.clazzLevelList;
                arr.map((item) => {
                    item.value = item.classLevel;
                    item.label = item.chClassLevel;
                    item.leaf = true;
                });
                if (el_node[node.level] && el_node.length > 0) {
                    el_node[node.level].style.display = "block";
                }
                resolve(arr);
            } else {
                if (el_node[node.level] && el_node.length > 0) {
                    el_node[node.level].style.display = "none";
                }
                resolve([]);
            }

        },

    },
    created() {
    },
    mounted: function() {
        let vm = this;
        vm.loadSearchData(null, "1");
    }
};
</script>