el-cascader cascade selector dynamically loads data and echoes data methods (the most comprehensive summary) <grootbaby>

When there is a lot of data in a region, the speed of obtaining all the data is too slow, and the experience is not very good. Change to lazy loading, and select regions one by one to avoid the problem of slow speed. Load the first-level data for the first time, and give the required parameters, because the node.value loaded for the first time has no value, and judge whether it is the first-level data or not. When the last level is clicked, the label will not turn in circles, and the relevant value will be assigned to the selector. When editing the pop-up display, sometimes it cannot be echoed correctly, cancel the display or change the key value. By analogy, the code and name of all levels are obtained and passed to the backend for reception. Get the name of the penultimate level of data. Get the name of the third-to-last level data.

upper code

<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
  }
},

important point

1. Both showCascader and resetCascader are used for editing and displaying.

When editing the pop-up display, sometimes it cannot be echoed correctly. It is effective to cancel the display or change the key value to re-render the cascade selector .

2. optionProps lazy and lazyLoad are set for lazy loading.

When there is a lot of data in a region, the speed of obtaining all the data is too slow, and the experience is not very good. Change to lazy loading, and select regions one by one to avoid the problem of slow speed.

3、data.parentId = value ? value : 410000000000 

Load the first-level data for the first time, and give the required parameters, because the first-time load node.value has no value, and judge whether it is the first-level data or not.

4、item.leaf = level >= 1 

When the last level is clicked, the label will not turn around and assign the relevant value to the selector.

5、@change="handleChange" 

The change event gets the selected value, but it can only get the code and not the name value

this.$refs.myCascader.getCheckedNodes()[0].label  can get the name of the last level of data 

parent.label gets the name of the penultimate level of data 

parent.parent.label gets the name of the third-to-last level of data 

By analogy, the code and name of all levels are obtained and passed to the backend for reception.