elementUI级联选择器懒加载 新增、回显

<template> 
    <el-cascader 
        v-model="checkData" 
        :options="options" 
        ref="cascader" 
        :props="cascaderProps" 
        :show-all-levels="showAllLevels" 
        @change="handleChange" 
        filterable 
    clearable/> 
</template>


<script>
import * as api from './api'
export default {
    name: "mz-aera-cascader",
    props: {
    //是否多选，默认false
    multiple: { 
        type: Boolean, 
        required: false, 
        default: false 
   },
     
     //是否严格的遵守父子节点不互相关联 选择任意一级选项 
     checkStrictly: { 
         type: Boolean, 
         required: false, 
         default: false 
     },
     
    //否显示完整的路径 将其赋值为false则仅显示最后一级 
    showAllLevels: { 
        type: Boolean, 
        required: false, 
        default: true 
    },
    
    //filterable赋值为true即可打开搜索功能 
    filterable: { 
        type: Boolean, 
        required: false, 
        default: false 
    },
    
   //选择的地址框 
   checkOption: { 
       type: Array, 
       required: false, 
       default: [] 
   } 
 }, 
 
 watch: { 
     checkOption(newData) { 
         this.checkData = newData 
     } 
 },
    
 
 data() { 
     return { 
     //地区的父级编码，默认是0 
     pid: 0, 
     checkData: this.checkOption, 
     options: [], 
     cascaderProps: { 
         lazy: true, 
         multiple: this.multiple, 
         checkStrictly: this.checkStrictly, 
         value: 'id', 
         label: 'name', 
         childrenData: 'children', 
         lazyLoad: (node, resolve) => { 
             this.getData(node, resolve) 
            } 
         }, 
     } 
 },
 
 
 methods: {
       //查询父code数据 
       getData(node, resolve) { 
           if (node.level != 0) { 
               this.pid = node.data.id 
           } else { 
               this.pid = 0 
           } 
           let childDataList = [] 
           api.getDataByPid(this.pid).then(res => { 
               childDataList = res resolve(childDataList) 
           }) 
       }, 
       
       //获取选择的值
       handleChange() { 
           //单选点击选择按钮防止出现暂无数据节点，手动调用lazyLoad方法 
           if (!this.multiple) { 
               const selectNode = this.$refs.cascader.getCheckedNodes()[0] 
               // node节点 
               if (selectNode && !selectNode.loaded) this.$refs.cascader.$refs['panel'].lazyLoad(selectNode) // 选中加载 
           }
           
       this.$emit('handleChange', this.checkData)
       }  
        
 }
 
}
</script> 

<style scoped> 

</style>