element-ui el-cascader 动态加载省市区 三级联动

 参考文章地址：http://raboninco.com/1OFB3

<template>
  <div id="zoning">
    <el-cascader
      ref="cascader"
      :options="options"
      :clearable="true"
      placeholder="请选择省市区"
      :size="size"
      :props="props"
      @active-item-change="handleItemChange"
      @change="changefn"
    />
  </div>
</template>

<script>
export default {
  name: 'MyProvinces',
  props: {
    arrOptions: {
      // 回显数组
      type: Array,
      default: () => {
        return [];
      }
    },
    type: {
      // 1获取国内省市区 2 获取目的国省市区
      type: Number,
      default: 1
    },
    size: {
      type: String,
      default: 'small'
    }
  },
  data() {
    return {
      options: [],
      props: {
        value: 'main',
        // 显示的文字字段名
        label: 'name_cn',
        // 子层级字段名
        children: 'child'
      }
    }
  },
  mounted() {
    this.getZoning()
  },
  methods: {
    changefn(val) {
      val = val.map(item => JSON.parse(item).area_no)
      this.$emit('provincesChoose', val); // 将选中的数组返回
    },
    /** 初始化* */
    getZoning(val, type) {
      const self = this;
      const idArea = !val ? 0 : val[val.length - 1];
      // 发送请求
      this.$store
        .dispatch('supplier/getcitylist', { type: this.type, parent_no: idArea }).then(res => {
          self.options = res
          self.options.map((item, index) => {
            for (const k in item) {
              if (!item[k]) {
                delete item[k]
              }
            }
            // 先让数据变成父级
            item.child = []
            // 手动创建字段表明当前索引 假设arrIndex值为'1-2-3' 即为options[1].child[2].child[3]
            item.arrIndex = index + ''
            // 将当前数据转成字符串放入对象里 当做value值
            item.main = JSON.stringify(item)
          })
        })
    },
    handleItemChange(val) {
      // 因为允许选择任意级,所以在向下选择时,会出现选择多个的情况,造成选中的合并成了一个数组,我这里只让他选择到第三层,页面上最多只会出现选择三个,如果超出了,直接return出去 不需要再动态加载下去了
      if (val.length > 2) return
      // 开门见山的说,每选中一个选项,相当于将本条数据push到val里,所以索引为val.length - 1的那一项必然是当前点击的那一项,哇 我他娘的可真是才思敏捷啊
      val = JSON.parse(val[val.length - 1])
      // 发送请求,是不是觉得和初始化用的同一个接口,然后还分两个事件有点冗余?写代码不累啊!
      this.$store
        .dispatch('supplier/getcitylist', { type: this.type, parent_no: val.area_no }).then(res => {
          const data = res
          // 是不是有点迷糊 arrIndex哪来的?这玩意就是手动塞进去的索引
          let arrIndex = val.arrIndex
          data.map((item, index) => {
            // 手动创建字段表明当前索引 假设arrIndex值为'1-2-3' 即为options[1].child[2].child[3]
            item.arrIndex = arrIndex + '-' + index
            // 将当前数据转成字符串放入对象里 当做value值
            item.main = JSON.stringify(item)
            // 判断是否是第三层及以上
            if (item.arrIndex.split('-').length < 3) {
              item.child = []
            }
          })
          // 根据父元素的arrIndex判断塞到哪个父元素下
          arrIndex = arrIndex.split('-')
          // 首项键不是child 和for循环里区别开
          let a = this.options[arrIndex[0]]
          for (let i = 1; i < arrIndex.length; i++) {
            a = a['child'][arrIndex[i]]
          }
          // 方法丑是丑了点...不过...真香
          this.$delete(a, 'child');
          this.$set(a, 'child', data)
        })
    }
  }
}
</script>

<style scoped>

</style>