使用vue3+ts写一个陕西省市区二级联动的筛选列表

好的，以下是一个简单的陕西省市区二级联动的筛选列表的实现，使用Vue3和TypeScript编写：

首先，创建一个`Area`接口，用来表示省市区的数据结构：

interface Area {
  name: string;
  code: string;
  children: Area[];
}

然后，创建一个`AreaSelector`组件，用来实现省市区的筛选列表：

<template>
  <div>
    <select v-model="selectedProvince" @change="onProvinceChange">
      <option value="">请选择</option>
      <option v-for="province in provinces" :value="province.code">{{ province.name }}</option>
    </select>
    <select v-model="selectedCity" @change="onCityChange" :disabled="!selectedProvince">
      <option value="">请选择</option>
      <option v-for="city in cities" :value="city.code">{{ city.name }}</option>
    </select>
    <select v-model="selectedDistrict" :disabled="!selectedCity">
      <option value="">请选择</option>
      <option v-for="district in districts" :value="district.code">{{ district.name }}</option>
    </select>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue';

interface Props {
  areas: Area[];
}

export default defineComponent({
  props: {
    areas: {
      type: Array as () => Area[],
      required: true,
    },
  },
  setup(props: Props) {
    const selectedProvince = ref('');
    const selectedCity = ref('');
    const selectedDistrict = ref('');

    const provinces = props.areas;

    const cities = ref<Area[]>([]);
    const districts = ref<Area[]>([]);

    function onProvinceChange() {
      const province = provinces.find((p) => p.code === selectedProvince.value);
      cities.value = province?.children ?? [];
      selectedCity.value = '';
      selectedDistrict.value = '';
    }

    function onCityChange() {
      const city = cities.value.find((c) => c.code === selectedCity.value);
      districts.value = city?.children ?? [];
      selectedDistrict.value = '';
    }

    watch(selectedProvince, onProvinceChange);
    watch(selectedCity, onCityChange);

    return {
      selectedProvince,
      selectedCity,
      selectedDistrict,
      provinces,
      cities,
      districts,
    };
  },
});
</script>

在上面的代码中，我们首先定义了一个`AreaSelector`组件，它接收一个`areas`属性，表示所有的省市区数据。然后，在`setup`函数中，我们定义了一些响应式变量，包括当前选中的省市区，以及根据选中的省市计算出来的城市和区县列表。

接下来，我们定义了`onProvinceChange`和`onCityChange`两个函数，用来在选中省市时更新城市和区县列表。具体来说，当选中省份时，我们找到对应的省份数据，然后将其子级城市列表赋值给`cities`变量，并将选中的城市和区县重置为默认值。当选中城市时，我们找到对应的城市数据，然后将其子级区县列表赋值给`districts`变量，并将选中的区县重置为默认值。

最后，在组件的模板中，我们使用`<select>`元素实现了省市区的下拉列表，并将选中的值绑定到响应式变量上。同时，我们使用`@change`事件和`:disabled`属性来控制城市和区县列表的显示和隐藏。

使用这个组件的时候，我们需要先将所有的省市区数据传递给它，然后通过`v-model`指令绑定选中的省市区值，例如：

<template>
  <div>
    <area-selector :areas="areas" v-model="selectedAreaCode" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import AreaSelector from './AreaSelector.vue';
import areasData from './areas.json';

export default defineComponent({
  components: {
    AreaSelector,
  },
  setup() {
    const selectedAreaCode = ref('');

    const areas = areasData as Area[];

    return {
      selectedAreaCode,
      areas,
    };
  },
});
</script>

上面的代码中，我们通过`<area-selector>`标签使用了`AreaSelector`组件，并将所有的省市区数据传递给它。然后，我们使用`v-model`指令将选中的省市区代码绑定到`selectedAreaCode`变量上，以便于在其他地方使用。