vue element-china-area-data 单选择 省

在Vue.js中，Element Plus库是一个基于Element UI的增强版本，提供了一系列丰富的组件。当你需要创建一个省级别的单选选择功能时，可以使用Element Plus的`el-select`组件结合`element-china-area-data`插件，该插件通常包含中国省份的数据。

`el-select`组件允许你创建下拉菜单式的选项，而`element-china-area-data`可以简化获取和展示省市级别的数据。首先，在项目中安装这两个依赖：

npm install vue-element-plus @element-plus/icons-vue element-china-area-data

然后在你的组件中这样使用：

<template>
  <div>
    <el-select v-model="province" placeholder="请选择省份">
      <el-option
        v-for="item in provinces"
        :key="item.id"
        :label="item.name"
        :value="item.value"
      ></el-option>
    </el-select>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { provinceData } from 'element-china-area-data';

const provinces = ref();
setup() {
  const province = ref();

  // 加载省份数据
  const loadProvinces = async () => {
    provinces.value = await provinceData();
  };

  // 初始化数据加载
  loadProvinces();

  // 你可以在这里添加事件监听，比如点击选择时触发某个方法
  onInput(province);
}
</script>

在这个例子中，`v-model`绑定了当前选中的省份值，`<el-option>`遍历`provinces`数组，显示每个省份的名称和对应的值。记得替换`onInput(province)`为你实际需要的事件处理函数。