vue+element Cascader 级联选择器之动态加载下级选项

vue+element Cascader 级联选择器之动态加载下级选项
文档链接https://element.eleme.cn/#/zh-CN/component/cascader
需求描述：省和市后台出两个接口，前端界面一个输入框显示出来，如图：

代码在github master分支https://github.com/ysmyzly/cascader.git

先请求省的接口，然后使用 @active-item-change="handleItemChange"请求下一个列表的接口，使用$set更新视图

使用props来声明，html代码如下

<template>
  <div class="home">
    <el-cascader
      :disabled="viewDetails"
      v-model="sendAddress"
      :options="provenceArray"
      @active-item-change="handleItemChange"
      ref="myCascader"
      @change="onProvincesChange"
      :props="props"
      size="small"
    >
    el-cascader>
  div>
template>

js代码：

<script>
import { getProvince, getCity } from "../request/enterprises";
export default {
  name: "Home",
  data() {
    return {
      sendAddress: ["AHI"],
      provenceArray: [], // 省区数组
      props: {
        label: "value",
        value: "name",
        children: "children",
      },
    };
    // };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    // item
    onProvincesChange() {
      this.sendAddressName =
        this.$refs.myCascader.getCheckedNodes()[0].pathLabels;
      // console.log(item, this.$refs.myCascader.getCheckedNodes()[0].pathLabels)
    },
    // 利用active-item-change事件，可以在用户点击某个省份时拉取该省份下的城市数据
    handleItemChange(val) {
      let value = val[0];
      getCity(value).then((res) => {
        let cities = res.data.resourceList || [];
        for (let i = 0; i < this.provenceArray.length; i++) {
          if (this.provenceArray[i].name === value) {
            this.provenceArray[i].children = cities; // 视图未更新
            this.$set(this.provenceArray[i], i, cities); // 更新视图
            break;
          }
        }
        console.log(this.provenceArray, 999);
      });
    },
    getUserInfo() {
      getProvince({}).then((res) => {
        this.provenceArray = res.resourceList || [];
        this.provenceArray.forEach((item, index) => {
          this.provenceArray[index].children = []; // 视图未更新
          // this.$set(this.provenceArray[index], 'cities', []) // right
        });
        // console.log(this.provenceArray, "this.provenceArray");
      });
    },
  },
};
</script>