Vue Element Cascader 级联选择器，如何优雅的重加载，处理回显问题

优雅的reCreate Cascader

父组件 reCreate 级联选择控件，处理cascader组件 lazy加载时级联回显问题

<!-- 父组件 -->
......
<el-form-item label="Regiona">
	<!-- 借用唯一值key，使组件更新时同时重新创建RegionaCascade组件 -->
	<regional-cascade :key="form.id" v-model="area" />
</el-form-item>
......

<!-- 子组件 cascader -->
<template>
  <el-cascader ref="cascader" v-model="areaN" :props="props" @change="expandChange" />
</template>

<script>
import * as area from '@/api/tools/regionalCascade'
export default {
  name: 'RegionalCascade',
  model: {
    prop: 'area',
    event: 'change-area'
  },
  props: {
    area: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      areaN: this.area || [],
      props: {
        lazy: true,
        value: 'code',
        label: 'name',
        lazyLoad(node, resolve) {
          if (node.root) {
            area.provinceList()
              .then(res => {
                resolve(res.provinceRecords.map(p => {
                  return {
                    ...p,
                    leaf: false,
                    type: 'province'
                  }
                }))
              })
          } else if (node.data.type === 'province') {
            area.cityList({
              provinceCode: node.data.code
            })
              .then(res => {
                resolve(res.cityRecords.map(c => {
                  return {
                    ...c,
                    leaf: false,
                    type: 'city'
                  }
                }))
              })
          } else {
            area.areaList({
              cityCode: node.data.code
            })
              .then(res => {
                resolve(res.areaRecords.map(a => {
                  return {
                    ...a,
                    leaf: true,
                    type: 'area'
                  }
                }))
              })
          }
        }
      }
    }
  },
  methods: {
    expandChange(v) {
      this.$emit('change-area', v)
    }
  }
}
</script>