element-UI的级联远程动态加载数据回显

需求：省市区使用element-UI的级联组件实现省市区的动态加载选择以及数据的回显

// template
 <el-cascader
    :key="cascader"
    ref="cascader"
    :placeholder="请选择省市区"
    @change="changeAdress"
    style="width: 100%"
    v-model="provinces"
    :props="props"
    :options="province"
  ></el-cascader>
 // 组件属性说明
 /**
 change 当选中节点变化时触发
 value / v-model	选中项绑定值	
 options	可选项数据源，键名可通过 Props 属性配置	array	
 props	配置选项，具体见下表	object
*/

props配置如下图：

代码里的props配置：

 provinces:'',
 province: [], 
 cascader:Math.random(),
 props: {
    lazy: true, // 是否动态加载子节点
    // lazyLoad加载动态数据的方法(仅在 lazy 为 true 时有效)
    async lazyLoad (node, resolve) {
      console.log(node)
      const { level, data } = node;  // 取出当前层级和选择数据
      if (data && data.children && data.children.length !== 0) { // 提前加载数据切换后再点击回数据重复
         return resolve(node)
       }
       /**
       * areaType 1国家  2省  3城市 4区
       */
       let params = {
         areaType: +level + 2,
         parentId: (data && data.areaId) ? data.areaId : ''
       }
       let res = await self.findOnLineAreas(params)
       console.log(res)
       if (res && res.length && res[0].areaType === 1) {
         console.log('先查国家----------')
         const { areaId } = res[0]
         res = await self.findOnLineAreas({
           areaType: 2,
           parentId: areaId
         })
       }
       console.log(res, node)
         if (res) {
           const nodes = res.map(item => ({
             value: `${item.areaId},${item.areaName}`,
             label: item.areaName,
             id: item.id,
             areaId: item.areaId,
             areaType: item.areaType,
             leaf: level >= 2,
             children: []
           }))
           resolve(nodes)
         }
       }
     }
   }

回显数据

 async echoData ({ provinceId, cityId, type }) {
 	const APT = 请求省市区的接口
    const [res = [], res2 = [], res3 = []] = await Promise.all([
      this[API]({ areaType: 2, parentId: '' }),
      this[API]({
        areaType: 3,
        parentId: provinceId
      }),
      this[API]({
        areaType: 4,
        parentId: cityId
      })
    ])
      this.filterArr(res) // 省份数据
      this.filterArr(res2) // 市区数据
      this.filterArr(res3) // 县级数据
      if (res) {
        for (let i = 0; i < res.length; i++) {
          let item = res[i]
          if (item.areaId === provinceId) {
            this.$set(item, 'children', res2)
            break
          }
        }
      }
      if (res2) {
        for (let i = 0; i < res2.length; i++) {
          let item = res2[i]
          if (item.areaId === cityId) {
            this.$set(item, 'children', res3)
            break
          }
        }
      }
     this.province = res
     this.cascader = Math.random()
    },
  // 处理提前加载省市区数据，绑定对应的value 和 label
    filterArr (res) {
      if (res) {
        return res.map(item => {
          item.value = `${item.areaId},${item.areaName}`
          item.label = item.areaName
          // areaType=4 为区，为叶子节点
          if (item.areaType >= 4) {
            item.leaf = true
          } else {
            item.leaf = false
          }
          return item
        })
      }
    }