ElementUI写地址三级联动

template部分：

<el-cascader  v-model="selectedOptions"   :options="options" :props="defaultParams" @change="handleChange" style="width: 140px; overflow: hidden"></el-cascader>

data:

      // 地址选择器
      options: [],
      selectedOptions: [],
      defaultParams:{},
      provinceCityArea: "", //选择器选择的省市区

create生命周期:

 let that = this;
 this.defaultParams={
        lazy: true,
        async lazyLoad(node, resolve) {
          const { level } = node;
        
          let val={}
          let leaf=false
          switch(level){
            case 0:
              val={}
                  break;
                  case 1:
                  val={
                      provinceId:node.data.value//省id
                  }
                  break;
                  case 2:
                val={
                      cityId:node.data.value//市id
                  }
                leaf=true    
                  break;
                }
            const data = await that.getAreaAtChange(val);//获取区/县接口
            // console.log(data)
            var nodes = data.data.map(item => {
              return {
                value: item.id,
                label: item.name,
                leaf: leaf
              };
            });
            resolve(nodes);
          }
        }

methods:

   //接口为后端给我们三级地址数据的接口
  getAreaAtChange(params){
      var that=this;
      let ajax=new Promise((resolve, reject) => {
        that.$http.post("/api/public/getArea", params).then((res) => {
          resolve(res)
        });
      })
      return ajax
    },

以上为从后端获取省市区的三级地址联动写法，该方法用于一些自定义省市区code时；

下面为element-china-area-data 带的三级地址联动：

  <el-cascader size="large" :options="options" v-model="form.selectedOptions" 
        @change="handleChange" clearable style="width:100%">
  </el-cascader>

<script>
import { regionData, CodeToText } from "element-china-area-data";
export default {
  name: "AddressOptions",
  data() {
    return {
      options: regionData,
      form: {
        selectedOptions: [],
        provinceCode: "",
        cityCode: "",
        areaCode: "",
      }
    }
  },
  methods:{
   handleChange() {
      let loc = "";
      for (let i = 0; i < this.form.selectedOptions.length; i++) {
        loc += CodeToText[this.form.selectedOptions[i]];
      }
      this.form.provinceCode = this.form.selectedOptions[0];
      this.form.cityCode = this.form.selectedOptions[1];
      this.form.areaCode = this.form.selectedOptions[2];
    },
  }
}
</script>