中国省市区地区选择组件（ElementPlus + Vue3 + TS ）

以下是一个使用Vue 3、Element Plus和TypeScript创建的简单省市区选择器组件的示例代码：

<template>
  <el-cascader
    v-model="selectedValue"
    :options="regionOptions"
    placeholder="请选择地区"
    @change="handleRegionChange"
  ></el-cascader>
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
 
interface RegionOption {
  label: string;
  value: string;
  children?: RegionOption[];
}
 
export default defineComponent({
  name: 'RegionSelector',
 
  setup() {
    const selectedValue = ref<string[]>([]);
    const regionOptions = ref<RegionOption[]>([
      {
        label: '北京市',
        value: '北京市',
        children: [
          { label: '市辖区', value: '市辖区' },
          { label: '县', value: '县' },
        ],
      },
      // ... 其他省市区数据
    ]);
 
    const handleRegionChange = (value: string[]) => {
      console.log('Selected region:', value);
    };
 
    return {
      selectedValue,
      regionOptions,
      handleRegionChange,
    };
  },
});
</script>

这个组件使用了Element Plus的el-cascader组件来创建级联选择器，用户可以从一个列表中选择省市区。组件的选中值和选项数据都通过ref来定义响应式数据，并且提供了一个handleRegionChange方法来处理选择发生变化时的逻辑。