1.el-cascader数据懒加载实现

<el-cascader
  ref="cascader"
  v-model="selctedCasArea"
  @change="handleSelectArea" //选中数据处理用
  @expand-change="expandChange" //数据异步加载时选中态消失处理
  :props="areaCasProps"
  placeholder="地区选择"
  clearable>
</el-cascader>

data() {
  return {
    areaCasProps: {
    multiple: true,
    checkStrictly: true,
    lazy: true,
    lazyLoad: _this.lazyLoad
  },
  selctedCasArea: []
}

methods: {
  lazyLoad (node, resolve) {
    const { level } = node
    if (level === 0) {
      this.getProvince(node, resolve)
    } else {
      this.provinces(node, resolve)
    }
  }
}

2.数据源切换时动态更新

methods: {
  switch (para) {
    if (para === this.curFlag) return
    this.curFlag = para
    if (this.curFlag === 2) {
      this.$refs.cascader.panel.lazyLoad()
    } else {
      this.$refs.cascader.panel.lazyLoad()
    }
  }
}

3.el-cascader数据懒加载下选中数据不消失

expandChange (val) {
  let curSelctedCasArea = this.selctedCasArea
  curSelctedCasArea.push(val)
  this.selctedCasArea = curSelctedCasArea
}

3.el-cascader数据懒加载下数据回选

getProvince (node, resolve) {
  HomeApi.getProvince()
    .then((res) => {
      if (res.code === 200) {
        let arr = res.data.map((item) => {
          return {
            ...item,
            label: item.name,
            value: item.code,
            leaf: false
          }
        })
        resolve(arr)
      }
    })
    .finally(() => {
      this.selctedCasArea = [['110000']]
    })
}