el-cascader 级联选择器动态加载数据及回显数据方法（最全概括）＜grootbaby＞

当地区数据比较多时，全部获取数据速度太慢，体验不太好，改为懒加载，一级一级选择地区就能很好避免速度慢的问题。首次加载第一级数据，给出所需要的参数，因为首次加载 node.value 没有值，据此判断是不是第一级数据。当点击最后一级的时候 label 后面不会转圈圈，并把相关值赋值到选择器上。编辑弹窗展示的时候，有时候并不能正确回显，取消展示或者改变 key 值。依次类推，拿到全部层级的 code 和 name 传给后端接收使用。获取倒数第二级的数据的 name。获取倒数第三级的数据的 name。

上代码

<el-cascader
  v-if="showCascader"
  class="form-item-cascader"
  :key="resetCascader"
  ref="myCascader"
  v-model="ruleForm.area"
  placeholder="请选择地区"
  :props="optionProps"
  clearable
  @change="handleChange"
></el-cascader>

optionProps: {
  value: 'code',
  label: 'name',
  children: 'areaList',
  emitPath: true,
  lazy: true,
  lazyLoad: (node, resolve)=> {
      const { level, value } = node; // 获取当前node对象中的level, value属性
      this.getArea(level, value, resolve)
  }
},
resetCascader: 0,

// 编辑弹窗回显数据
addAndEdit(row) {
  // 改变 key 值，组件重新渲染，实现数据回显
  this.resetCascader++
  // 组件隐藏，重新渲染，实现数据回显
  // this.showCascader = false
  // setTimeout(() => {
  //   this.showCascader = true
  // }, 1);
  if(row) {
    this.dialogForm = row
    this.dialogForm.area = []
    this.dialogForm.area.push(row.cityCode, row.areaCode, row.streetCode, row.villageCode)
  }
},

getArea(level, value, resolve) {
  let vm = this;
  let url = "/area/v2/find-parent-list";
  const data = {}
  data.parentId = value ? value : 410000000000
  vm.common.getdata(vm, url, data, function(res) {
    const nodes = res.data
    // level == 3 我这里是四级联动，在最后一级不需要下一级，层级从 0 开始
    if (level == 3) {
      nodes.forEach(item => {
        // 当点击最后一级的时候 label 后面不会转圈圈 并把相关值赋值到选择器上
        item.leaf = level >= 1
      })
    }
    resolve(nodes)
  })
},

handleChange(value) {
  if (value && value[0] && value[1] && value[2] && value[3]) {
    this.ruleForm.cityCode = value[0]
    this.ruleForm.areaCode = value[1]
    this.ruleForm.streetCode = value[2]
    this.ruleForm.villageCode = value[3]
    const Nodes = this.$refs.myCascader.getCheckedNodes()[0]
    this.ruleForm.cityName = Nodes.parent.parent.parent.label
    this.ruleForm.areaName = Nodes.parent.parent.label
    this.ruleForm.streetName = Nodes.parent.label
    this.ruleForm.villageName = Nodes.label
  }
},

注意点

1、showCascader 和 resetCascader 都是做编辑回显用的。

编辑弹窗展示的时候，有时候并不能正确回显，取消展示或者改变 key 值重新渲染级联选择器的⽅法都是有效的。

2、optionProps lazy 及 lazyLoad 是设置懒加载的。

当地区数据比较多时，全部获取数据速度太慢，体验不太好，改为懒加载，一级一级选择地区就能很好避免速度慢的问题。

3、data.parentId = value ? value : 410000000000 

首次加载第一级数据，给出所需要的参数，因为首次加载 node.value 没有值，据此判断是不是第一级数据。

4、item.leaf = level >= 1 

当点击最后一级的时候 label 后面不会转圈圈，并把相关值赋值到选择器上。

5、@change="handleChange" 

change 事件获取选中值，但是只能获取到 code 并不能拿到 name 值

this.$refs.myCascader.getCheckedNodes()[0].label 可以获取到最后一级数据的 name 

parent.label 获取倒数第二级的数据的 name 

parent.parent.label 获取倒数第三级的数据的 name 

依次类推，拿到全部层级的 code 和 name 传给后端接收使用。