vue2 element-ui el-cascader实现城市三级联动 (封装组件, 方便复用)

用element自带的cascader 封装为组件 方便服用
↓↓↓ 看代码 ↓↓↓
第一步 创建一个vue文件 area.vue
城市数据需要自己获取 结尾有我自用的数据

<template>
	
  <el-cascader
    @change="ctry_change"
    v-model="ctry"
    :options="area_data"
    :style="`width:${width}`"
  />
</template>
<script>
import { area } from "@/utils/area";
export default {
  props: { address: String, width: { type: String, default: "100%" } },
  data() {
    return {
      ctry: [], //联机选择器 v-model 绑定的值
      ctry_value: [], //城市中转数据
      ctry_val: 0, //城市绑定值遍历的下标
      area_data: area, //城市数据
    };
  },

  watch: {
    address: {
      handler(newVal, oldVal) {
        let ctry = newVal.split("|");
        if (!ctry.length) return;
        this.ctry_value = []; //中间值重置数据
        this.ctry_center(ctry, "label");
        this.ctry = this.ctry_value;
        this.ctry_value = [];
        this.$emit("detail_", [ctry[ctry.length - 1], ctry.splice(0, 3)]);
      },
    },
  },
  methods: {
    //联机选择器切换时的回调函数
    ctry_change() {
      this.ctry_value = [];
      this.ctry_center(this.ctry, "value");
      // 发给父元素 选择的城市信息
      this.$emit("ctry_name", this.ctry_value);
      this.ctry_value = [];
    },

    //复用代码    ctry 城市信息   type 复用代码 有 "value"||"label" 可用
    ctry_center(ctry, type) {
      for (let i = this.area_data.length; i--; ) {
        this.get_ctry_name(ctry, this.area_data[i], type);
      }
      this.ctry_val = 0;
    },
    //获取城市信息  value || label  并赋值给中转变量
    get_ctry_name(val, item, type) {
      if (val[this.ctry_val] === item[type]) {
        this.ctry_value.push(item[type === "value" ? "label" : "value"]);
        if (item["children"]) {
          this.ctry_val++;
          for (let i = item.children.length; i--; ) {
            this.get_ctry_name(val, item.children[i], type);
          }
        }
      }
    },
  },
};
</script>
<style lang="scss"></style>

<template>
			//组件中使用
			<el-area
            :address="FormData.Address"
            @ctry_name="ctry_name"
            @detail_="detail__a"
          />
</template>
<script>
import elArea from "@/components/area";
export default {
components:{
	elArea
},
data(){
	return {
		//...
},
methids:{
	 detail__a(val) {
      this.detailAddress = val[0];
      this.city_info = val[1];
    },
    ctry_name(val) {
      this.city_info = val;
    },
}
}
</scripe>

按自己项目情况进行修改