element，el-cascader省市区级联动态加载数据

效果图（可选择某个省份下的全部市，或某个市下面的全部区/县）

代码

<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>

省接口数据

市接口数据

区/县接口数据