element Cascader 级联选择器动态加载实例

Posted 2022-12-08 包子源

封装Cascader 级联选择器动态加载组件实现省市区三级联动

组件代码片段

<template>
  <el-cascader ref="myCascader" @change="handleChange" v-model="partyOrganId" placeholder="请选择" :props="areaprop"></el-cascader>
</template>

<script>
import  findProvince, findChildById  from "@/api/base";
export default 
  name: "AreaTree",
  props: 
    partyOrganId: 
      type: Array,
      default() 
        return []
      
    
  ,
  data() 
    return 
      areaprop: 
        lazy: true,
        lazyLoad(node, resolve) 
          setTimeout(() => 
            if (node.level == 0) 
              findProvince().then(response => 
                const cities = response.data.map((value, i) => (
                  value: value.id,
                  label: value.name,
                  leaf: node.level >= 2
                ));
                resolve(cities);
              );
            
            if (node.level == 1) 
              findChildById(node.value).then(response => 
                const areas = response.data.map((value, i) => (
                  value: value.id,
                  label: value.name,
                  leaf: node.level >= 2
                ));
                resolve(areas);
              );
             else if (node.level == 2) 
              findChildById(node.value).then(response => 
                const areas = response.data.map((value, i) => (
                  value: value.id,
                  label: value.name,
                  leaf: node.level >= 2
                ));
                resolve(areas);
              );
            
          , 100);
        
      
    ;
  ,
  mounted() 
    // console.log(this.partyOrganId)
  ,
  methods: 
    handleChange(value)
      this.$emit("changeAreaTree",value)
    
  
;
</script>

引用组件

<area-tree :partyOrganId="oid" @changeAreaTree="changeAreaTreeVal()"></area-tree>

后台接口：

findProvince返回数据格式

	"code":"0",
	"data":[
		
			"id":"110000",
			"levelType":1,
			"mergeName":"中国,北京",
			"name":"北京",
			"parentId":"100000"
		,
		
			"id":"120000",
			"levelType":1,
			"mergeName":"中国,天津",
			"name":"天津",
			"parentId":"100000"
		,
		
			"id":"130000",
			"levelType":1,
			"mergeName":"中国,河北省",
			"name":"河北省",
			"parentId":"100000"
		
	],
	"msg":"success",
	"serverTime":"2020-05-15 11:38:53"

findChildById/110000 返回数据格式：

	"code":"0",
	"data":[
		
			"id":"110100",
			"levelType":2,
			"mergeName":"中国,北京,北京市",
			"name":"北京市",
			"parentId":"110000"
		
	],
	"msg":"success",
	"serverTime":"2020-05-15 11:38:55"

效果图