elementui 级联选择--全国区域选择_elementui地区级联选择

<template>
  <el-cascader
    v-model="areaList"
    style="width:100%"
    ref="areaTree"
    :props="areaProps"
    clearable
    :options="data"
    @change="changeArea"
  />
</template>
 
<script>
import pcasCode from "@/assets/json/pcas-code.json" // 非全国
import pcasCode2 from "@/assets/json/pcas-code2.json" // 全国
import axios from "axios";
export default {
  props: {
    value: [Array, Object],
    //是否可选择任意节点
    checkStrictly: {
      type: Boolean,
      default: false
    },
    noRoot: {
      type: Boolean,
      default: false
    },
    //最多查询层级 4可到街道 和noRoot相关
    levelLimit: {
      type: Number,
      default: 4
    }
  },
  watch: {
    value: {
      immediate: true,
      handler (val) {
        if (val) {
          let list = []
          console.log(val);
          val.forEach(item => {
            let arr = []
            let { nationwide, provinceCode, cityCode, areaCode, streetCode } = item
            if (!this.noRoot && nationwide) {
              arr.push(nationwide)
            }
            if (provinceCode) {
              arr.push(provinceCode)
            }
            if (cityCode) {
              arr.push(cityCode)
            }
            if (areaCode) {
              arr.push(areaCode)
            }
            if (streetCode) {
              arr.push(streetCode)
            }
            list.push(arr)
          })
          this.areaList = list;
          this.$forceUpdate();
        } else {
          this.areaList = []
          this.$forceUpdate();
        }
      },
      deep: true
    },
  },
  data () {
    return {
      data: this.noRoot ? pcasCode : pcasCode2,
      areaList: [],
      areaProps: {
        value: "code",
        label: "name",
        expandTrigger: "click",
        lazy: false,
        multiple: true,
        checkStrictly: this.checkStrictly,
        lazyLoad: (node, resolve) => {
          const { level } = node;
          let parentArea = "";
 
          if (this.noRoot || level !== 0) {
            parentArea = node.value;
            this.getArea(parentArea, level === this.levelLimit).then((res) => {
              resolve(res);
            });
          } else {
            let r = {
              areaCode: "410000",
              areaName: '全国',
              leaf: level === this.levelLimit,
            }
            //必须异步 不然无法触发多级请求 恶心死我
            setTimeout(() => {
              resolve([r]);
            })
 
          }
 
        },
      },
    }
  },
  methods: {
    getArea (code, isLeaf) {
      return new Promise((resolve, reject) => {
        axios
          .get("/amap/v3/config/district", {
            params: {
              keywords: "650000",
              subdistrict: 3,
              key: "aff1e25d9a37616eff95250ce75a48f9",
            },
          })
          .then((res) => {
            let data = res.data.districts[0].districts.map((item) => {
              let adcode
              if (this.levelLimit === (this.noRoot ? 3 : 4)) {
                adcode = item.level === "street" ? item.name : item.adcode
              } else {
                adcode = item.adcode
              }
              return {
                areaCode: adcode,
                areaName: item.name,
                leaf: isLeaf,
              };
            });
 
            resolve(data);
          });
 
      });
    },
    changeArea (val) {
      if (!val.length) {
        this.$emit("change", [])
        return
      }
      if (this.noRoot) {
        this.$nextTick(() => {
          let list = []
          val.forEach((item, index) => {
            let [provinceCode, cityCode, areaCode, streetCode] = item
            let obj = {
              provinceCode,
              cityCode,
              areaCode,
              streetCode,
              fullAreaText: this.getfullAreaText(index)
            }
            list.push(obj)
          });
          this.$emit("change", list)
        });
      } else {
        this.$nextTick(() => {
          let list = []
          val.forEach((item, index) => {
            let [nationwide, provinceCode, cityCode, areaCode, streetCode] = item
            let obj = {
              nationwide,
              provinceCode,
              cityCode,
              areaCode,
              streetCode,
              fullAreaText: this.getfullAreaText(index)
            }
            list.push(obj)
          });
          this.$emit("change", list)
        });
      }
 
    },
    //返回地区文本
    getfullAreaText (index) {
      // this.$nextTick(() => {
      let str = this.$refs.areaTree.presentTags[index].text;
      if (str == "全国") {
        return str.replaceAll(" / ", "")
      } else {
        return str.replaceAll(" / ", "").replace("全国", "") || ""
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.el-cascader {
  max-height: 300px;
  overflow: scroll;
  &::-webkit-scrollbar {
    width: 0;
  }
}
::v-deep .el-cascader__tags {
  top: 0;
  transform: translateY(0);
}
</style>