element 级联选择器 省市区动态获取

Posted 2022-01-13 妮可是条狗

项目需要实现下图效果，并且可以支持选择到任意一级

根据获取省市区码的接口拿到当前的省市区编码，再将编码传到获取该地区数据的接口，拿到返回值传回父组件。

1.通过lazy开启动态加载，通过lazyload来设置加载数据源的方法，对节点数据添加是否为叶子节点的标志leaf，如果后台数据没有该标志，可自己手动循环添加）
2.通过props.checkStrictly=true来设置父子节点取消选中关联，从而达到选择任意一级选项的目的
3.我的项目中获取省市区县接口有两个参数：第一个参数是type类型：省PROVINCE，市CITY，区县COUNTY，第二个参数为省市区编码，可针对自己项目接口实际情况进行调整。

<template>
  <div class="cascader">
    <el-cascader
      :props="props"
      ref="cascader"
      clearable
      @change="handleChange"
      :options="dataList"
      v-model="cascaderData"
    >
    </el-cascader>
  </div>
</template>
<script>
export default 
  props: [],
  data() 
    return 
      cityList: [], //市数据
      countyList: [], //区县数据
      dataList: [
        
          code: "",
          name: "",
        ,
      ],
      props: 
        checkStrictly: true, //开启可以只选择一级
        value: "code",
        label: "name",
        lazy: true, // 此处必须为true
        lazyLoad: (node, resolve) => 
          if (node.data.name) 
            this.getChildData(node.data, resolve, node.level);
          
        ,
      ,
      provinceCode: "",
      cityCode: "",
      cascaderData: null,
    ;
  ,
  created() 
    this.getProvince();
  ,
  methods: 
    getChildData(data, resolve, level) 
      if (level == 1) 
        //市
        this.provinceCode = data.code;
        this.getCity(this.provinceCode, resolve);
       else if (level == 2) 
        //区
        this.cityCode = data.code;
        this.getCounty(this.cityCode, resolve);
      
    ,
    handleChange(value) 
      if (value.length > 0) 
        this.$ajax
          .get(this.$urls.fastDistribute.getCityGeo + value[value.length-1])
          .then((res) => 
            if (res.data.code == 200) 
              // 将当前选中节点数据和当前路径数组返回给父组件
              this.$emit("getCascaderData", res.data.data);
            
          );
       else 
        this.$emit("getCascaderData", "");
      
    ,
    //获取省
    getProvince() 
      this.$ajax
        .get(this.$urls.getCityList,  type: "PROVINCE" )
        .then((res) => 
          if (res.data.code == 200) 
            this.dataList = res.data.data;
          
        );
    ,
    //获取市
    getCity(code, resolve) 
      this.$ajax
        .get(this.$urls.getCityList, 
          type: "CITY",
          code: code,
        )
        .then((res) => 
          if (res.data.code == 200) 
            this.cityList = res.data.data;
            resolve(this.cityList);
          
        );
    ,
    //获取区县
    getCounty(code, resolve) 
      this.$ajax
        .get(this.$urls.getCityList, 
          type: "COUNTY",
          code: code,
        )
        .then((res) => 
          if (res.data.code == 200) 
            let data = res.data.data;
            data.forEach((item) => 
              item.leaf = true; //手动添加叶子节点
            );
            this.countyList = data;
            resolve(this.countyList);
          
        );
    ,
  ,
;
</script>