element里el-cascader懒加载回显

<template>
  <el-cascader
    ref="cascader"
    :value="adVal"
    @change="changeVal"
    :placeholder="i18nt('application.pSelect')"
    :props="props"
  ></el-cascader>
</template>
<script>
import { getAllCountry, getAllProvice, getCityByProvince, getRegionsByCity } from "@/api/common";
export default {
  props: {
    isInland: {
      // 0仅选国内，1仅选国外
      type: String,
      default: "0",
    },
    addressValue: {
      type: [String, Array],
      default: "",
    },
  },
  data() {
    return {
      options: [],
      showAddress: false,
      adVal: this.addressValue,
      props: {
        lazy: true,
        lazyLoad: this.lazyLoad,
      },
    };
  },
  watch: {
    isInland() {
      // 动态切换数据源
      this.$refs.cascader.panel.lazyLoad();
      this.adVal = ''
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.addressValue[0] === "CN") {
        this.loadData(this.addressValue[1], this.addressValue[2]);
      }
    });
  },
  methods: {
    async lazyLoad(node, resolve) {
      let isInland = this.isInland;
      let { value, level } = node;
      switch (level) {
        case 0:
          if (!localStorage.getItem("allCountry")) {
            let res = await getAllCountry()
            localStorage.setItem("allCountry", res.data);
              if (res.data) {
                let nodes = [];
                JSON.parse(res.data).map((v) => {
                  if (isInland === "0" && v.code === "CN") {
                    nodes.push({
                      value: v.code,
                      label: v.name,
                      leaf: false,
                    });
                    return;
                  }
                  if (isInland === "1" && v.code !== "CN") {
                    nodes.push({
                      value: v.code,
                      label: v.name,
                      leaf: true,
                    });
                  }
                });
                resolve(nodes);
              }
          } else {
            let nodes = [];
            JSON.parse(localStorage.getItem("allCountry")).map((v) => {
              if (isInland === "0" && v.code === "CN") {
                nodes.push({
                  value: v.code,
                  label: v.name,
                  leaf: false,
                });
                return;
              }
              if (isInland === "1" && v.code !== "CN") {
                nodes.push({
                  value: v.code,
                  label: v.name,
                  leaf: true,
                });
              }
            });
            resolve(nodes);
          }
          break;
        case 1:
          getAllProvice().then((res) => {
            if (res.data) {
              let nodes = JSON.parse(res.data).map((v) => ({
                value: v.code,
                label: v.name,
                leaf: false,
              }));
              resolve(nodes);
            }
          });
          break;
        case 2:
          getCityByProvince({ provinceCode: value }).then((res) => {
            if (res.data) {
              let nodes = JSON.parse(res.data).map((v) => ({
                value: v.code,
                label: v.name,
                leaf: false,
              }));
              resolve(nodes);
            }
          });
          break;
        case 3:
          getRegionsByCity({ cityCode: value }).then((res) => {
            if (res.data) {
              let nodes = JSON.parse(res.data).map((v) => ({
                value: v.code,
                label: v.name,
                leaf: true,
              }));
              resolve(nodes);
            }
          });
          break;
      }
    },
    // 回显处理
    async loadData(provinceCode, cityCode) {
      // 获取到组件实例中存储数据用的store
      let store = this.$refs.cascader.$refs.panel.store;
      // 获取国家节点
      let countyNode = store.nodes.find((item) => item.value === "CN");
      // 获取所有省份
      let proviceData = await getAllProvice();
      let proviceList = JSON.parse(proviceData.data).map((v) => ({
        value: v.code,
        label: v.name,
        leaf: false,
      }));
      if(!countyNode) return;
      store.appendNodes(proviceList, countyNode);
      countyNode.loaded = true;
      // 调用panel的方法,模拟的是点击国家的操作
      this.$refs.cascader.$refs.panel.handleExpand(countyNode);
      // 根据省份获取市
      let cityData = await getCityByProvince({ provinceCode: provinceCode });
      let cityList = JSON.parse(cityData.data).map((v) => ({
        value: v.code,
        label: v.name,
        leaf: false,
      }));
      // 获取对应的省节点
      let proviceNode = countyNode.children.find((item) => item.value === provinceCode);
      // 把市的数据，添加到对应的 省节点
      store.appendNodes(cityList, proviceNode);
      proviceNode.loaded = true;
      // 调用panel的方法,模拟的是点击省份的操作
      this.$refs.cascader.$refs.panel.handleExpand(proviceNode);
      let regionsData = await getRegionsByCity({ cityCode: cityCode });
      let regionsList = JSON.parse(regionsData.data).map((v) => ({
        value: v.code,
        label: v.name,
        leaf: true,
      }));
      let cityNode = proviceNode.children.find((item) => item.value === cityCode);
      store.appendNodes(regionsList, cityNode);
      cityNode.loaded = true;
      this.$refs.cascader.$refs.panel.handleExpand(cityNode);
      // 调用组件的方法，将文字回显出来(省/市/区)
      this.$refs.cascader.computePresentText();
    },
    changeVal(val) {
      let v = val;
      console.log(val);
      let l = [];
      let csnode = this.$refs["cascader"].getCheckedNodes();
      if (this.onlyCountry && !this.multiple) {
        v = val[0];
        l = csnode == 0 ? "" : csnode[0].pathLabels[0];
      }
      if (this.multiple) {
        csnode.forEach((element) => {
          val.forEach((item) => {
            if (item == element.path) {
              l.push({
                pathLabels: element.pathLabels,
                path: element.path,
              });
            }
          });
        });
      } else {
        l = csnode == 0 ? "" : csnode[0].pathLabels;
      }
      this.$emit("change", v, l, this.index);
    },
  },
};
</script>