效果图（可选择某个省份下的全部市，或某个市下面的全部区/县） 代码
<el-cascader :props="props" @change="locationsChange" placeholder="省/市/区" size="small" v-model="locationsData" clearable ></el-cascader> <script> // import { getComProvince, getComCity, getComDistrict } from "@/service/common"; export default { data() { return { locationsData: [], props: { lazy: true, async lazyLoad(node, resolve) { const { level } = node; if (level == 0) { const { data } = await getComProvince();//获取省接口 var nodes = data.data.map(item => { return { value: item.id, label: item.name, leaf: false }; }); resolve(nodes); } else if (level == 1) { const { data } = await getComCity(node.data.value);//获取市接口 var nodes = data.data.map(item => { return { value: item.id, label: item.name, leaf: false }; }); nodes.unshift({ value: 0, label: "全部", leaf: true }); resolve(nodes); } else if (level == 2) { const { data } = await getComCity(node.data.value);//获取区/县接口 var nodes = data.data.map(item => { return { value: item.id, label: item.name, leaf: true }; }); nodes.unshift({ value: 0, label: "全部", leaf: true }); resolve(nodes); } } } }; }, methods: { locationsChange(value) { this.locationsData = value; } } }; </script>省接口数据
市接口数据 区/县接口数据
