vue+element 地址选择器（二级联动、三级联动），无需封装组件，嘎嘎好用

在Vue中实现一个不需要封装组件的地址选择器（二级联动、三级联动），可以通过使用Element UI的el-select组件来实现。以下是一个简单的例子，展示了如何使用el-select组件来创建一个二级联动和三级联动的地址选择器。

<template>
  <div>
    <!-- 二级联动 -->
    <el-select v-model="provinceId" placeholder="请选择省份">
      <el-option
        v-for="province in provinces"
        :key="province.id"
        :label="province.name"
        :value="province.id">
      </el-option>
    </el-select>
    <el-select v-model="cityId" placeholder="请选择城市">
      <el-option
        v-for="city in cities"
        :key="city.id"
        :label="city.name"
        :value="city.id">
      </el-option>
    </el-select>
 
    <!-- 三级联动 -->
    <el-select v-model="countryId" placeholder="请选择国家">
      <el-option
        v-for="country in countries"
        :key="country.id"
        :label="country.name"
        :value="country.id">
      </el-option>
    </el-select>
    <el-select v-model="provinceId" placeholder="请选择省份">
      <el-option
        v-for="province in provinces"
        :key="province.id"
        :label="province.name"
        :value="province.id">
      </el-option>
    </el-select>
    <el-select v-model="cityId" placeholder="请选择城市">
      <el-option
        v-for="city in cities"
        :key="city.id"
        :label="city.name"
        :value="city.id">
      </el-option>
    </el-select>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      // 国家、省份、城市的ID
      countryId: null,
      provinceId: null,
      cityId: null,
      // 数据示例
      countries: [
        { id: 1, name: '中国' },
        { id: 2, name: '美国' }
      ],
      provinces: [
        { id: 11, name: '广东', parentId: 1 },
        { id: 12, name: '四川', parentId: 1 }
      ],
      cities: [
        { id: 111, name: '广州', parentId: 11 },
        { id: 112, name: '深圳', parentId: 11 }
      ]
    };
  },
  watch: {
    // 监听国家选择的变化，更新省份和城市列表
    countryId(newCountryId) {
      this.provinceId = null;
      this.cityId = null;
      if (newCountryId === 1) {
        th