地区选择三级联动

新手，新手，新手，写的很基础，很基础，会的有限，做项目是要用到，但是没有合适的插件，自己写一个

先看效果，

 当点击每一层级的时候都还有相应的样式变化

html部分：

<div class="eject-area" v-if="visiblearea">
        <div class="major-area">
            <div class="header">
                <div class="province" style="width: 34%;" :class="{addStyle: bordeRight}">省</div>
                <div class="city" :class="{addStyle: borderBottom}">市</div>
                <div class="region" :class="{addStyle: borderTop}">地区</div>
            </div>
            <div class="alldata">
                <div class="province" style="width: 22%;background-color: #f4f6fa;" @click="allProvice">全部</div>
                <div class="city" @click="allCity">全部</div>
                <div class="region" @click="allRegin">全部</div>
            </div>
            <div class="content-area">
                <div class="province">
                    <div class="provice-data" v-for="(item, index) of provicelist" @click="addClass(item,index)" :class="{selected: index == current}">{{item.provinceName}}</div>
                </div>
                <div class="city">
                    <div class="city-data" v-for="(item, index) of citylist" @click="addClassTwo(item,index)" :class="{selected: index == currenttwo}">{{item.cityName}}</div>
                </div>
                <div class="region">
                    <div class="region-data" v-for="(item, index) of regionlist" @click="addClassThree(item,index)" :class="{selected: index == currentthree}">{{item.districtName}}</div>
                </div>
            </div>
        </div>
    </div>

css部分：

.eject-area {
		width: 100%;
		background: #FFFFFF;
		margin: 0.2rem auto;
		position: absolute;
		top: 1.2rem;
		left: 0;
		z-index: 10000;
		
		.major-area {
			margin-top: 0.2rem;
			font-size: 0.4rem;
			border-top: 3px solid #f0f3f7;
			.header {
				width: 74%;
				height: 1rem;
				display: flex;
				// border: 1px solid red;
				div {
					width: 40%;
					height: 1rem;
					text-align: center;
					line-height: 1rem;
					margin: 0 12% 0 8%;
				}
			}
			.alldata {
				width: 100%;
				display: flex;
				border-top: 1px solid #C3DCFF;
				div {
					width: 25%;
					height: 1rem;
					text-align: center;
					line-height: 1rem;
				}
			}
			.content-area {
				width: 74%;
				height: 100%;
				display: flex;
				.province {
					width: 30%;
					background-color: #f4f6fa;
					margin-bottom: 1rem;
					div {
						height: 1.2rem;
						text-align: center;
						line-height: 1.2rem;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
				.city {
					width: 33.5%;
					div {
						height: 1.2rem;
						text-align: center;
						line-height: 1.2rem;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
				.region {
					width: 33.5%;
					div {
						height: 1.2rem;
						text-align: center;
						line-height: 1.2rem;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}
			.addStyle {
				border-bottom: 2px solid #0b7ee8;
				color: #0b7ee8;
			}
			.selected {
				background-color: #fff;
				color: #0b7ee8;
			}
		}
	}

js部分：

export default {
  name: "BaseHeader",
  components: {
  },
  data() {
    return {
      // 地区选择
      visiblearea: false,
      // 文本框内容
      inputValue: "",
      // 列表内容
      provicelist: "",
      citylist: "",
      regionlist: "",
      // 点击样式
      current: null,
      currenttwo: null,
      currentthree: null,
      borderBottom: 1,
      borderTop: 0,
      bordeRight: 0,
      isView: true,
      ofValue: "",
      onValue: "",
      inValue: "",
      // 回传ID
      regionID: "",
    };
  },
  computed: {

  },
  created() {
    this.allListProvice();
  },
  mounted() {
  },
  methods: {
    // 拼接地区内容
    splicing() {
        this.inputValue = this.ofValue + this.onValue + this.inValue;
    },
    // 获取所有省列表
    allListProvice() {
        PROVICE_LIST()
            .then((res) => {
                // console.log(res);
                this.provicelist = res.data;
            })
            .catch((err) => {
                console.log(err);
            })
    },
    // 点击样式
    addClass(item,index) {
        CITY_LIST(item.provinceCode)
            .then((res) => {
                // console.log(res);
                this.citylist = res.data;
                this.regionlist = undefined;
            })
            .catch((err) => {
                console.log(err);
            })
        this.current = index;
        this.allCity();
        this.bordeRight = 1;
        this.ofValue = item.provinceName;
        this.splicing();
        this.isView = false;
    },
    addClassTwo(item,index) {
        REGION_LIST(item.cityCode)
            .then((res) => {
                // console.log(res);
                this.regionlist = res.data;
            })
            .catch((err) => {
                console.log(err);
            })
        this.currenttwo = index;
        this.currentthree = null;
        this.borderBottom = 1;
        this.borderTop = 0;
        this.bordeRight = 0;
        this.onValue = item.cityName;
        this.splicing();
    },
    addClassThree(item,index) {
        this.currentthree = index;
        this.borderBottom = 0;
        this.borderTop = 1;
        this.bordeRight = 0;
        this.inValue = item.districtName;
        this.splicing();
        this.regionID = item.districtCode;
    },
    // 点击全部
    allProvice() {
        this.allCity();
        this.current = null;
        this.bordeRight = 0;
        this.ofValue = "";
        this.splicing();
        // this.provicelist = undefined;
    },
    allCity() {
        this.currenttwo = null;
        this.allRegin();
        this.borderBottom = null;
        this.bordeRight = 1;
        this.citylist = undefined;
        this.onValue = "";
        this.splicing();
    },
    allRegin() {
        this.currentthree = null;
        this.borderTop = null;
        this.borderBottom = 1;
        this.bordeRight = 0;
        this.regionlist = undefined;
        this.inValue = "";
        this.splicing();
    },
  }
};

另外还有上边的input输入框 可以当点击内容时自动拼接，

当点击全部时会自动清空当前级联的内容和样式。