表单代码示例

  
    
      
    
    
      
    
    
      
    
    
      
    
    
      
        男
        女
      
    
    
      
        选择省市区
        手填地点
      
      
        
        
      
      
    
    
      提交
    
  


import { ref } from 'vue';
import axios from 'axios';
import { ElForm, ElFormItem, ElInput, ElRadioGroup, ElRadio, ElButton, ElCollapse, ElCascader } from 'element-plus';
export default {
  components: {
    ElForm,
    ElFormItem,
    ElInput,
    ElRadioGroup,
    ElRadio,
    ElButton,
    ElCollapse,
    ElCascader,
  },
  data() {
    return {
      formData: {
        name: '',
        phone: '',
        age: '',
        school: '',
        gender: '',
        location: '',
      },
      formRules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^[1][3,4,5,7,8][0-9]{9}$/, message: '手机号格式不正确', trigger: 'blur' },
        ],
        age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
        school: [{ required: true, message: '请输入学校', trigger: 'blur' }],
        gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
        location: [{ required: true, message: '请选择或输入地点', trigger: 'blur' }],
      },
      locationType: 'province', // 默认选择省市区
      collapseVisible: false,
      options: [
        // 省市区数据，根据实际情况填写
        { code: '110000', name: '北京市', children: [...] },
        { code: '120000', name: '天津市', children: [...] },
        // 其他省市区数据
      ],
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单验证通过，可以提交数据
          axios.post('/api/submit', this.formData)
            .then(response => {
              console.log('提交成功', response);
              // 根据实际需求处理提交成功后的逻辑
            })
            .catch(error => {
              console.error('提交失败', error);
              // 根据实际需求处理提交失败后的逻辑
            });
        } else {
          return false;
        }
      });
    },
  },
};


/* 可选：自定义样式 */