省/市/行政区el-cascader 动态加载

代码永远都是最好的诠释

引入控件

<el-cascader :options="options" @active-item-change="getNodes" :props="props"></el-cascader>

动态处理获取子节点

<script>
import { getProviceList, getCityList, getAreaList } from "@/api/api";
export default {
  data() {
    return {
      options: [],
      props: {
        value: "id",
        label: "name",
        children: "children"
      }
    };
  },
  methods: {
    // 获取省份
    async getProviceList() {
      const { data } = await getProviceList();
      data.map(item => {
        this.$set(item, "name", item.provinceName);
        this.$set(item, "children", []);
      });
      this.options = data;
    },
    // 获取城市
    async getCityList(provinceId) {
      const { data } = await getCityList({ provinceId });
      data.map(item => {
        this.$set(item, "name", item.cityName);
        this.$set(item, "children", []);
      });
      this.options.map((item, i) => {
        if (item.id === provinceId) {
          item.children = data;
        }
      });
    },
    // 获取地区
    async getAreaList(provinceId, cityId) {
      const { code, data } = await getAreaList({ cityId });
      data.map(item => {
        this.$set(item, "name", item.areaName);
        // this.$set(item, "children", []);
      });
      this.options.map((item, i) => {
        if (item.id === provinceId) {
          item.children.map((city, idx) => {
            city.children = data;
          });
        }
      });
    },
    getNodes(val) {
      // 获取城市（二级）
      if (val.length === 1) {
        this.getCityList(val[0]);
        // 获取地区 （三级）
      } else if (val.length === 2) {
        this.getAreaList(val[0], val[1]);
      }
    }
  }
};
</script>

不添加 children就结束了

就是这么简单 

最后来一波效果图