vue+elemnt-ui (省市区)三级联动菜单

1.省市区数据结构如下：

        options = [
          {
            label: "北京市",
            value: "110000",
            children: [
              {
                label: "北京市",
                value: "110100",
                children: [
                  {
                    label: "东城区",
                    value: "110101",
                  }
                ]
              },
            ],
          },
          {
            label: "天津市",
            value: "120000",
            children: [
              {
                label: "天津市",
                value: "120100",
                children: [
                  {
                    label: "和平区",
                    value: "120101",
                  }
                ]
              },
            ],
          }
        ];

2. html

      <el-cascader
        ref="cascader"
        v-model="addressValue"
        :options="options"     options为省市区联动的数据
        @change="handleChange"
        @expand-change="expand_change"
        :placeholder="holderValue"
      ></el-cascader>

3.获取省一级数据

    this.$axios({
      url: this.Global.host + "/handle/v1/get-provinces",
      method: "GET",
      headers: {},
      data: {},
    }).then((res) => {
      var options = res.data.rspdata;
      this.options = options.map(item => {
        return {
          value: item.provinceId,
          label: item.provinceName,
          children: [],
        }
      })
    });

4.获取市取数据

//当展开节点发生变化时触发  value为各父级选项值 如：（value：110000 等）组成的数组
    expand_change(value) {
    //value.length == 1  表示 当前选中了省份  根据省份Id获取 省份对应的城市列表
      if (value.length == 1) {
        this.$axios({
          url: this.Global.host + "/handle/v1/get-citys",
          method: "GET",
          headers: {},
          params: {
            provinceId: value[0],
          },
        }).then((res) => {
        // cityLis城市数据
          var cityLis = res.data.rspdata;
          this.options.map((item) => {
            if (item.value === value[0] && !item.children.length) {
            //将城市数据赋值给对应的省份children属性
              item.children = cityLis.map((item) => {
                return {
                  value: item.cityId,
                  label: item.cityName,
                  children: [{ value: null, label: "请选择" }],
                };
              });
            }
          });
        });
      } else if (value.length == 2) {
          //value.length == 2  表示 当前选中了城市 根据城市Id获取城市对应的地区列表
        this.$axios({
          url: this.Global.host + "/handle/v1/get-areas",
          method: "GET",
          headers: {},
          params: {
            cityId: value[1],
          },
        }).then((res) => {
        // areaLis  地区数据
          let areaLis = res.data.rspdata;
          this.options.map((city) => {
            if (city.value === value[0]) {
              city.children.map((area) => {
                if (!area.children.value && area.value === value[1]) {
                // 将地区数据赋值给对应的城市children属性
                  area.children = areaLis.map((item1) => {
                    return {
                      value: item1.areaId,
                      label: item1.areaName,
                    };
                  });
                }
              });
            }
          });
        });
      }
    },