Vue（二十八）el-cascader 動態加載 - 省市區組件

1.後臺接口爲點擊加載下一級 ，傳省市區id

<template>
  <el-cascader
    v-model="selectedOptions"
    placeholder="請選擇省市區"
    :options="cascaderData"
    @active-item-change="handleItemChange"
    :props="{
      value: 'id',
      label: 'name',
      children: 'cities'
    }"
  ></el-cascader>
</template>

<script>
export default {
  name: 'my-provinces',
  data () {
    return {
      departmentOptions: [],
      cascaderData: [],
      selectedOptions: []
    }
  },
  methods: {
    getNodes (val) {
      let idArea
      let sizeArea
      if (!val) {
        idArea = null
        sizeArea = 0
      } else if (val.length === 1) {
        idArea = val[0]
        sizeArea = val.length // 3:一級 4:二級 6:三級
      } else if (val.length === 2) {
        idArea = val[1]
        sizeArea = val.length // 3:一級 4:二級 6:三級
      }
      this.$post('ibest/service/system/area/areaList', {
        'id': idArea
      }).then(response => {
        if (response.data && response.data.code === '00000000') {
          let Items = response.data.data
          if (sizeArea === 0) { // 初始化 加載一級 省
            this.cascaderData = Items.map((value, i) => {
              return {
                id: value.id,
                name: value.name,
                cities: []
              }
            })
          } else if (sizeArea === 1) { // 點擊一級 加載二級 市
            this.cascaderData.map((value, i) => {
              if (value.id === val[0]) {
                if (!value.cities.length) {
                  value.cities = Items.map((value, i) => {
                    return {
                      id: value.id,
                      name: value.name,
                      cities: []
                    }
                  })
                }
              }
            })
          } else if (sizeArea === 2) { // 點擊二級 加載三級 區
            this.cascaderData.map((value, i) => {
              if (value.id === val[0]) {
                value.cities.map((value, i) => {
                  if (value.id === val[1]) {
                    if (!value.cities.length) {
                      value.cities = Items.map((value, i) => {
                        return {
                          id: value.id,
                          name: value.name
                        }
                      })
                    }
                  }
                })
              }
            })
          }
        } else {
          console.log(response.data.msg)
        }
      }, error => {
        console.log(error)
      })
    },
    handleItemChange (val) {
      this.getNodes(val)
    }
  },
  mounted () {
    this.getNodes()
  }
}
</script>

2.效果