const provinceData = [
  { value: '1', label: '北京' },
  { value: '2', label: '上海' },
  { value: '3', label: '廣州' }
];

const cityData = {
  '1': [{ value: '11', label: '東城區(qū)' }, { value: '12', label: '西城區(qū)' }],
  '2': [{ value: '21', label: '黃浦區(qū)' }, { value: '22', label: '靜安區(qū)' }],
  '3': [{ value: '31', label: '越秀區(qū)' }, { value: '32', label: '海珠區(qū)' }]
};

const districtData = {
  '11': [{ value: '111', label: '東華門' }],
  '12': [{ value: '121', label: '什剎海' }],
  // ... 省略其他區(qū)縣數(shù)據(jù)
};

<template>
  <el-select v-model="province" @change="handleProvinceChange">
    <el-option v-for="item in provinceData" :key="item.value" :label="item.label" :value="item.value"></el-option>
  </el-select>
  <el-select v-model="city" @change="handleCityChange">
    <el-option v-for="item in cityOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
  </el-select>
  <el-select v-model="district">
    <el-option v-for="item in districtOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
  </el-select>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const province = ref('');
    const city = ref('');
    const district = ref('');

    const cityOptions = computed(() => {
      return cityData[province.value] || [];
    });

    const districtOptions = computed(() => {
      return districtData[city.value] || [];
    });

    const handleProvinceChange = () => {
      city.value = ''; // 級聯(lián)重置
      district.value = ''; // 級聯(lián)重置
    };

    const handleCityChange = () => {
      district.value = ''; // 級聯(lián)重置
    };

    return {
      province,
      city,
      district,
      cityOptions,
      districtOptions,
      handleProvinceChange,
      handleCityChange
    };
  }
};
</script>