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格式發送到后端處理。
