vue3+ts二级联动

实现 Vue3 + TypeScript 的二级联动，可以考虑以下步骤：

1. 定义接口类型，用于表示二级联动数据的结构
2. 在组件中声明数据，使用 ref 定义响应式数据，并初始化为一个空数组
3. 在组件的 setup 函数中，通过 onMounted 钩子函数来获取远程数据，并将结果更新到 ref 中
4. 在模板中使用 v-for 指令渲染出一级下拉框，并绑定 v-model 指令
5. 通过 watchEffect 函数监听一级下拉框的变化，并更新二级下拉框的选项
6. 在模板中使用 v-if 指令判断是否需要渲染二级下拉框

下面是一个简单的示例代码：

<template>
  <div>
    <select v-model="selectedOption1" @change="onOption1Change">
      <option value="">请选择</option>
      <option v-for="option in optionList1" :value="option.value" :key="option.value">{{ option.label }}</option>
    </select>
    <select v-if="optionList2.length" v-model="selectedOption2">
      <option value="">请选择</option>
      <option v-for="option in optionList2" :value="option.value" :key="option.value">{{ option.label }}</option>
    </select>
  </div>
</template>

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

interface Option {
  label: string;
  value: string;
}

interface OptionGroup {
  label: string;
  value: string;
  children: Option[];
}

export default {
  setup() {
    const optionList1 = ref<OptionGroup[]>([]);
    const optionList2 = ref<Option[]>([]);
    const selectedOption1 = ref<string>('');
    const selectedOption2 = ref<string>('');

    onMounted(async () => {
      // 发起网络请求获取数据
      const data = await fetch('https://example.com/options').then(res => res.json());
      optionList1.value = data;
    });

    const onOption1Change = () => {
      const optionGroup = optionList1.value.find(group => group.value === selectedOption1.value);      optionList2.value = optionGroup ? optionGroup.children : [];
      selectedOption2.value = '';
    };

    watchEffect(onOption1Change);

    return {
      optionList1,
      optionList2,
      selectedOption1,
      selectedOption2,
      onOption1Change,
    };
  },
};
</script>

<style scoped>
/* 省略样式 */
</style>