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

上代码

<el-cascader
  v-if="showCascader"
  class="form-item-cascader"
  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)
  }
},

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 是做编辑回显用的。

编辑弹窗展示的时候，有时候并不能正确回显，取消展示重新渲染级联选择器的?法最简单。

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 传给后端接收使用。