el-cascader 懒加载 回显数据

<template>
  <div class='dashboard-container'>
    <el-cascader ref='cascader' v-model='cascaderValue' v-loading='loading' :disabled='disabled' :props='props'
                 :title='selStr' clearable
                 element-loading-spinner='el-icon-loading'
                 placeholder='请选择'
                 @change='handleChange($event)' />
  </div>
</template>

<script>
import { getAddressCity, getAddressDistrict, getAddressProvince } from '@/api/common'

export default {
  name: 'index',
  data() {
    return {
      cascaderValue: [],
      selArr: [],
      selStr: '',
      loading: false,
      loadignArr: [true, true, true],
      props: {
        lazy: true,
        lazyLoad: this.lazyLoad
      }
    }
  },
  props: {
    value: {
      Type: Object
    },
    disabled: {
      default: false
    }
  },
  watch: {
    value: {
      handler(val) {
        if (val) {
          console.log(val, this.value)
          this.lazyLoad()
          this.cascaderValue = this.value
        }
      },
      immediate: true
    },
    loadignArr: {
      handler(val) {
        console.log(val, 'loaingArr')
        const result = val.includes(true)
        if (result) {
          this.loading = true
        } else {
          this.loading = false
        }
      }

    }
  },
  created() {

  },
  methods: {
    handleChange(event) {
      console.log(event)
      console.log(this.$refs.cascader.getCheckedNodes())
      const selNode = this.$refs.cascader.getCheckedNodes()
      const selVal = selNode[0]
      this.getSelValue(selVal)this.$emit('getSelArr', this.selArr)
    },
    getSelValue(val) {
      console.log(val.label)
      if (val.parent) {
        this.getSelValue(val.parent)
      }
      const s = this.selStr ? '/' : ''
      this.selStr = this.selStr + s + val.label
      this.selArr.push({ name: val.label, id: val.value, levle: val.levle })
    },
    //
    lazyLoad(node, resolve) {
      setTimeout(() => {
        console.log(node.level)
        if (node.level == 0) {
          this.getProvence(node, resolve)
        }
        if (node.level == 1) {
          this.getCity(node, resolve)
        }
        if (node.level == 2) {
          this.getDistrict(node, resolve)
        }
      }, 100)
    },
    getProvence(node, resolve) {
      this.$set(this.loadignArr, 0, true)
      getAddressProvince().then((res) => {
        console.log(res)
        if (Array.isArray(res.data)) {
          const nodes = res.data.map(item => ({
            value: item.provinceCode, //
            // value: item.dwdm,
            label: item.provinceName,
            leaf: node.level >= 2//层级
          }))
          resolve(nodes)
        }
      }).catch(error => this.$message.error(error)).finally(() => {
        this.$set(this.loadignArr, 0, false)
      })
    },
    getCity(node, resolve) {
      this.$set(this.loadignArr, 1, true)
      getAddressCity(node.value).then((res) => {
        if (Array.isArray(res.data)) {
          const nodes = res.data.map(item => ({
            value: item.cityCode, //
            // value: item.dwdm,
            label: item.cityName,
            leaf: node.level >= 2//层级
          }))
          resolve(nodes)
        }
      }).catch(error => this.$message.error(error)).finally(() => {
        this.$set(this.loadignArr, 1, false)
      })
    },
    getDistrict(node, resolve) {
      this.$set(this.loadignArr, 2, true)
      getAddressDistrict(node.value).then((res) => {
        if (Array.isArray(res.data)) {
          const nodes = res.data.map(item => ({
            value: item.districtCode, //
            // value: item.dwdm,
            label: item.districtName,
            leaf: node.level >= 2//层级
          }))
          resolve(nodes)
        }
      }).catch(error => this.$message.error(error)).finally(() => {
        this.$set(this.loadignArr, 2, false)
      })
    }
  }
}
</script>

<style lang='less' scoped>
.el-cascader {
  line-height: 34px;
}
</style>