1. 创建表单组件
首先，创建一个表单组件，包括姓名、手机号、年龄、学校、性别等基本信息的输入框，并添加省市区和街道地点的选择功能。
<template><form @submit.prevent="submitForm"><el-form :model="formData" :rules="formRules" ref="formData" label-width="100px"><el-form-item label="姓名" prop="name"><el-input v-model="formData.name"></el-input></el-form-item><el-form-item label="手机号" prop="phone"><el-input v-model="formData.phone"></el-input></el-form-item><el-form-item label="年龄" prop="age"><el-input v-model.number="formData.age"></el-input></el-form-item><el-form-item label="学校" prop="school"><el-input v-model="formData.school"></el-input></el-form-item><el-form-item label="性别" prop="gender"><el-radio-group v-model="formData.gender"><el-radio label="male">男</el-radio><el-radio label="female">女</el-radio></el-radio-group></el-form-item><el-form-item label="地点" prop="location"><el-radio-group v-model="locationType"><el-radio :label="'district'" @change="handleLocationTypeChange">省市区</el-radio><el-radio :label="'street'" @change="handleLocationTypeChange">街道</el-radio></el-radio-group><div v-if="locationType === 'district'"><!-- 展示省市区组件 --><el-cascaderv-model="formData.district":options="districtOptions"@change="handleDistrictChange"placeholder="请选择省市区"></el-cascader></div><div v-else-if="locationType === 'street'"><!-- 展示街道多选组件 --><el-selectv-model="formData.street"multiplefilterableremotereserve-keyword:remote-method="loadStreets"placeholder="请输入街道名称"></el-select></div></el-form-item><el-form-item><el-button type="primary" native-type="submit">提交</el-button></el-form-item></el-form></form>
</template><script setup lang="ts">
import { ref } from 'vue';
import axios from 'axios';const formData = ref({name: '',phone: '',age: undefined,school: '',gender: 'male', // 默认选项district: [], // 省市区选择结果street: [], // 街道选择结果（多选）
});const formRules = ref({name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],phone: [{ required: true, message: '请输入手机号', trigger: 'blur' },{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' },],age: [{ required: true, message: '请输入年龄', trigger: 'blur' },{ type: 'number', min: 1, max: 150, message: '请输入1-150之间的数字', trigger: 'blur' },],school: [{ required: true, message: '请输入学校名称', trigger: 'blur' }],gender: [{ required: true, message: '请选择性别', trigger: 'change' }],district: [{ required: true, message: '请选择省市区', trigger: 'change' }],street: [{ required: true, message: '请选择街道', trigger: 'change' }],
});const locationType = ref('district'); // 默认选择省市区const districtOptions = ref([]); // 省市区选项// 加载街道列表
const loadStreets = async (query: string) => {try {const response = await axios.get(`/api/streets?query=${query}`);return response.data.streets.map((street: any) => ({label: street.name,value: street.id,}));} catch (error) {console.error('Error loading streets:', error);return [];}
};// 处理地点类型变化
const handleLocationTypeChange = () => {// 清空之前选择的值formData.street = [];
};// 处理省市区选择变化
const handleDistrictChange = () => {// 根据选择的省市区加载街道数据（这里可以根据实际需求进行调整）
};// 提交表单
const submitForm = async () => {try {await $refs.formData.validate();if (formData.value.locationType === 'district') {// 处理省市区数据} else if (formData.value.locationType === 'street') {// 处理街道数据}// 提交表单逻辑，例如调用后端接口console.log('Form data:', formData.value);// 使用 axios 发送表单数据到后端await axios.post('/api/submit', formData.value);} catch (error) {console.error('Submit error:', error);}
};
</script>
2. 实现数据加载和交互逻辑
在上述代码中，使用了Vue 3的Composition API结合TypeScript来管理表单数据、验证规则、组件交互等。
formData: 表单数据对象，包括姓名、手机号、年龄、学校、性别、省市区、街道等字段。formRules: 表单验证规则，确保必填字段不能为空且格式正确。locationType: 控制显示省市区选择还是街道选择的组件。districtOptions: 省市区选项数据，通过后端接口获取。loadStreets: 异步加载街道列表的方法，支持搜索功能。handleLocationTypeChange: 处理地点类型变化的方法，清空街道选择数据。handleDistrictChange: 处理省市区选择变化的方法，可以根据选择的省市区加载对应的街道数据。submitForm: 提交表单的方法，包括表单验证和实际数据提交到后端接口。
3. 数据加载和提交
确保通过axios调用后端接口来获取省市区和街道数据，并在选择省市区时加载相应的街道数据。在提交表单时，将表单数据以JSON格式发送到后端处理。