vue3+ts实现一个表单组件

1. 创建表单组件

首先，创建一个表单组件，包括姓名、手机号、年龄、学校、性别等基本信息的输入框，并添加省市区和街道地点的选择功能。

  
    
      
        
      
      
        
      
      
        
      
      
        
      
      
        
          男
          女
        
      
      
        
          省市区
          街道
        
        

          
          
        
        

          
          
        
      
      
        提交
      
    
  


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);
  }
};

2. 实现数据加载和交互逻辑

在上述代码中，使用了Vue 3的Composition API结合TypeScript来管理表单数据、验证规则、组件交互等。

• formData: 表单数据对象，包括姓名、手机号、年龄、学校、性别、省市区、街道等字段。
• formRules: 表单验证规则，确保必填字段不能为空且格式正确。
• locationType: 控制显示省市区选择还是街道选择的组件。
• districtOptions: 省市区选项数据，通过后端接口获取。
• loadStreets: 异步加载街道列表的方法，支持搜索功能。
• handleLocationTypeChange: 处理地点类型变化的方法，清空街道选择数据。
• handleDistrictChange: 处理省市区选择变化的方法，可以根据选择的省市区加载对应的街道数据。
• submitForm: 提交表单的方法，包括表单验证和实际数据提交到后端接口。

  3. 数据加载和提交

  确保通过axios调用后端接口来获取省市区和街道数据，并在选择省市区时加载相应的街道数据。在提交表单时，将表单数据以JSON格式发送到后端处理。