1. Create form components
First, create a form component, including input boxes for basic information such as name, mobile phone number, age, school, gender, etc., and add the selection function of province, city, district and street location.
<template>
<form @="submitForm">
<el-form :model="formData" :rules="formRules" ref="formData" label-width="100px">
<el-form-item label="Name" prop="name">
<el-input v-model=""></el-input>
</el-form-item>
<el-form-item label="Phone number" prop="phone">
<el-input v-model=""></el-input>
</el-form-item>
<el-form-item label="age" prop="age">
<el-input =""></el-input>
</el-form-item>
<el-form-item label="School" prop="school">
<el-input v-model=""></el-input>
</el-form-item>
<el-form-item label="gender" prop="gender">
<el-radio-group v-model="">
<el-radio label="male">male</el-radio>
<el-radio label="female">female</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="Place" prop="location">
<el-radio-group v-model="locationType">
<el-radio :label="'district'" @change="handleLocationTypeChange">Province, city and district</el-radio>
<el-radio :label="'street'" @change="handleLocationTypeChange">street</el-radio>
</el-radio-group>
<div v-if="locationType === 'district'">
<!-- 展示Province, city and district组件 -->
<el-cascader
v-model=""
:options="districtOptions"
@change="handleDistrictChange"
placeholder="Please select province, city and district"
></el-cascader>
</div>
<div v-else-if="locationType === 'street'">
<!-- 展示street多选组件 -->
<el-select
v-model=""
multiple
filterable
remote
reserve-keyword
:remote-method="loadStreets"
placeholder="Please enter the street name"
></el-select>
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" native-type="submit">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', // Default options district: [], // Results of provincial, municipal and district selection street: [], // Street selection result (multiple selection)});
const formRules = ref({
name: [{ required: true, message: 'Please enter your name', trigger: 'blur' }],
phone: [
{ required: true, message: 'Please enter your mobile phone number', trigger: 'blur' },
{ pattern: /^1[3-9]\d{9}$/, message: 'Please enter the correct mobile phone number', trigger: 'blur' },
],
age: [
{ required: true, message: 'Please enter age', trigger: 'blur' },
{ type: 'number', min: 1, max: 150, message: 'Please enter a number between 1-150', trigger: 'blur' },
],
school: [{ required: true, message: 'Please enter the school name', trigger: 'blur' }],
gender: [{ required: true, message: 'Please choose gender', trigger: 'change' }],
district: [{ required: true, message: 'Please select province, city and district', trigger: 'change' }],
street: [{ required: true, message: 'Please select the street', trigger: 'change' }],
});
const locationType = ref('district'); // By default, the province, city and district are selectedconst districtOptions = ref([]); // Provincial, municipal and district options// Load the street listconst loadStreets = async (query: string) => {
try {
const response = await (`/api/streets?query=${query}`);
return ((street: any) => ({
label: ,
value: ,
}));
} catch (error) {
('Error loading streets:', error);
return [];
}
};
// Handle location type changesconst handleLocationTypeChange = () => {
// Clear the value you selected before = [];
};
// Handle changes in provincial, municipal and district selectionconst handleDistrictChange = () => {
//Load street data according to the selected province, city and district (here can be adjusted according to actual needs)};
// Submit the formconst submitForm = async () => {
try {
await $();
if ( === 'district') {
// Processing provincial, municipal and district data } else if ( === 'street') {
// Process street data }
// Submit form logic, such as calling backend interface ('Form data:', );
// Use axios to send form data to the backend await ('/api/submit', );
} catch (error) {
('Submit error:', error);
}
};
</script>2. Implement data loading and interactive logic
In the above code, Vue 3's Composition API is used in conjunction with TypeScript to manage form data, verification rules, component interaction, etc.
-
formData: Form data object, including name, mobile phone number, age, school, gender, province, city, district, street and other fields. -
formRules: Form validation rules to ensure that the required fields cannot be empty and are formatted correctly. -
locationType: Controls the components that display province, city or district selection or street selection. -
districtOptions: Provincial, municipal and district options data, obtained through the backend interface. -
loadStreets: A method to load street lists asynchronously, supporting search function. -
handleLocationTypeChange: Methods to deal with changes in location types and clear street selection data. -
handleDistrictChange: The method to deal with changes in provincial, municipal and district selection, and the corresponding street data can be loaded according to the selected province, municipal and district. -
submitForm: Methods for submitting forms, including form verification and actual data submission to the backend interface.
3. Data loading and submission
Make sure to call the backend interface through axios to obtain provincial, municipal and street data, and load the corresponding street data when selecting province, municipal and districts. When submitting a form, the form data is sent to the backend for processing in JSON format.
This is the end of this article about the implementation of vue3+ts form component. For more related vue3 ts form component content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!