el-cascader多层级联点击动态加载子级

功能场景：

区划级联，例如从全国各省->市->县->乡->村，五级结构，那么如果通过一个接口数据量势必太大了。可能会出现接口请求慢的情况，所以就需要点击父级再去请求下一级这样一个实现思路。

效果图：

实现代码：

element的el-cascader 是提供了动态加载方法。

接口的数据结构

<!--行政区级联下拉框-->
<template>
  <div class="cas-wrap">
    <el-cascader 
      :title="getCascaderTitle()"
      :ref="refId" 
      :placeholder="_areaName||'请选择区域'" 
      :show-all-levels="false"
      :props="propsTree" 
      @change="change" 
      v-model="curXzq" 
      size="small">
    </el-cascader>
  </div>
  
</template>

<script>
import api from '../../../../../api/api_configcenter'
let defaultareaCode = ''
let xzqLevel = 12
export default {
  name: "xzqSelect",
  data(){
    return {
      refId:'',
      curXzq:['1'],

      options:[],

      cTitle:undefined,

      /*行政区划*/
      propsTree: {
        expandTrigger:"click",
        checkStrictly:true,
        emitPath:false,
        lazy: true,
        lazyLoad(node, resolve) {
          let qhdm;

          if (node.root) {
            qhdm = defaultareaCode
          } else {
            qhdm = node.value
          }
          api.getAreaTree({qhdm: qhdm?qhdm:1}).then(res => {
            if (res.code == 0 && res.data && res.data.length>0) {
              const nodes = Array.from(res.data).map(item => ({
                value: item.qhdm,
                label: item.qhmc,
                leaf: item.qhdm.length >= xzqLevel,
              }));
              resolve(nodes);
            } else {
              resolve([]);
            }
          })
        }
      },
    }
  },
  props:{
    "areaCode":{
      type:String,
      default:''
    },
    "areaName":{
      type:String,
      default:''
    },

    /*默认级联级别，到村12， 省2，市4，县6，乡镇9，村12*/
    level:{
      default: 12
    }
  },
  computed:{
    _areaCode:{
      get(){
        return this.areaCode||''
      },
      set(val){
        this.$emit('update:areaCode',val)
      }
    },
    _areaName:{
      get(){
        return this.areaName||''
      },
      set(val){
        this.$emit('update:areaName',val)
      }
    }
  },
  created() {
    xzqLevel = this.level
    this.refId= 'xzqSelect' + (Math.random() * 1000)
  },
  methods:{

    /*获取行政区记录下拉的title*/
    getCascaderTitle(){
      if(!this.$refs[this.refId]){return ""}
      let selectedNodes =  this.$refs[this.refId].getCheckedNodes();
      let title = '';
      if(selectedNodes[0]){
        this.cTitle = selectedNodes[0].label
        let pathNodes = selectedNodes[0].pathNodes;
        pathNodes.forEach(item => {
          title += item.label + "-"
        });
        if(title){title = title.slice(0,title.length -1 );}
      }      
      return title;
    },

    getCheckedNodes(){
      return  this.$refs[this.refId].getCheckedNodes()
    },

    change(row){
      let checkedNodes = this.$refs[this.refId].getCheckedNodes()
      let res = ''
      if(checkedNodes && checkedNodes.length > 0){
       res = this.$refs[this.refId].getCheckedNodes()[0].data
      }
      this.$nextTick(() =>{
        let obj = {
          qhdm:row,
          qhmc:this.cTitle
        }
        console.log('这里就拿到最后一级区划名称和区划代码',obj)
        this._areaCode = obj.qhdm
        this._areaName = obj.qhmc
        // this.$emit('changeQhdm',obj)
      })
    },
  }
}
</script>

<style scoped lang="scss">
  .blue_select{
    width: 100%;
  }
  .sys_background_image{
    /deep/ .el-input__inner{
      &:-moz-placeholder,   
      textarea:-moz-placeholder {   
          color: #333;   
      }   
        
      &:-ms-input-placeholder,   
      textarea:-ms-input-placeholder {   
          color: #333;   
      }   
        
      &::-webkit-input-placeholder,   
      textarea::-webkit-input-placeholder {   
          color: #333;   
      }  
    }
  }
  .cas-wrap{
  }
  .words{
    border-color: #E4E7ED;
    color: #606266;
    height: 30px;
    line-height: 30px;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    padding: 0 15px;
    box-sizing: content-box;
    font-size: 13px;
    margin-top: 3px;
    cursor: pointer;
  }
</style>