省市县三级联动的 Vue 完整代码

以下是一个简单的省市县三级联动的 Vue 完整代码示例：

<template>
  <div>
    <select v-model="province" @change="getCityList">
      <option value="">请选择省份</option>
      <option v-for="province in provinceList" :value="province">{{ province }}</option>
    </select>
    <select v-model="city" @change="getCountyList" :disabled="!cityList.length">
      <option value="">请选择城市</option>
      <option v-for="city in cityList" :value="city">{{ city }}</option>
    </select>
    <select v-model="county" :disabled="!countyList.length">
      <option value="">请选择县区</option>
      <option v-for="county in countyList" :value="county">{{ county }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      province: '',
      city: '',
      county: '',
      provinceList: [],
      cityList: [],
      countyList: []
    }
  },
  mounted() {
    // 加载省份列表
    this.getProvinceList()
  },
  methods: {
    // 获取省份列表
    getProvinceList() {
      // 发送请求或从本地数据源加载省份列表
      this.provinceList = ['北京市', '上海市', '广东省', '江苏省']
    },
    // 获取城市列表
    getCityList() {
      // 发送请求或从本地数据源加载城市列表
      this.cityList = ['南京市', '苏州市', '无锡市', '常州市']
    },
    // 获取县区列表
    getCountyList() {
      // 发送请求或从本地数据源加载县区列表
      this.countyList = ['玄武区', '秦淮区', '建邺区', '鼓楼区']
    }
  }
}
</script>

通过 `v-model` 指令将选中的省份、城市、县区与组件的 `data` 属性进行双向绑定，通过 `@change` 事件监听省份、城市下拉列表的变化，并根据选中的省份加载对应的城市、县区列表，通过 `:disabled` 属性实现级联菜单的禁用效果。在实际项目中，需要根据需求进行相应的修改和优化。