ElementUI表单项简单配置

1. 模板表单

<el-form ref="InfoRef" :model="InfoForm" :rules="InfoRules" label-width="160px">
    <el-row>
        <!-- 图片上传 -->
        <el-col :span="12">
            <el-form-item label="照片" prop="photoUrl">
                <el-upload class="avUpload" :http-request="uploadPicture" :show-file-list="false"
                    accept="image/jpeg,image/png" :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img :src="InfoForm.photoUrl" class="avatar" />
                </el-upload>
            </el-form-item>
        </el-col>
        <!-- input输入框 -->
        <el-col :span="12">
            <el-form-item label="考生姓名" prop="name">
                <el-input v-model="InfoForm.name" clearable />
            </el-form-item>
        </el-col>
        <!-- input文本框 -->
        <el-col :span="12">
            <el-form-item label="地址" prop="address">
                <el-input v-model="InfoForm.address" :rows="2" type="textarea" clearable />
            </el-form-item>
        </el-col>
    </el-row>
    <el-row>
        <!-- 单选 -->
        <el-col :span="12">
            <el-form-item label="性别" prop="gender">
                <el-select v-model="InfoForm.gender">
                    <el-option label="男" :value="5" />
                    <el-option label="女" :value="6" />
                </el-select>
            </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="省：" prop="province">
                <el-select v-model="InfoForm.province">
                    <el-option v-for="(lis, index) in provinceList" :key="index" :label="lis.name" :value="lis.id" />
                </el-select>
            </el-form-item>
        </el-col>
        <!-- 日期选择器 -->
        <el-col :span="12">
            <el-form-item label="考试开始日期" prop="examStartDate">
                <el-date-picker v-model="InfoForm.examStartDate" type="date" format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
            </el-form-item>
        </el-col>
    </el-row>
</el-form>

const InfoRef = ref(null);
const InfoForm = ref({
    photoUrl: '',
    name: '',
    address: '',
    gender: '',
    province: '',
    examStartDate: '',
});
const InfoRules = {
    photoUrl: [
        { required: true, message: "请上传照片", trigger: "blur" },
    ],
    name: [
        { required: true, message: "请输入考生姓名", trigger: "blur" },
    ],
    surname: [
        { required: true, message: "请输入地址", trigger: "blur" },
    ],
    ...
    // 额外规则
    rePassword: [
        { required: true, message: "请再次输入新密码", trigger: "blur" },
        {
            validator: (rule, value, callback) => {
                if (value === InfoForm.value.newPassword) {
                    callback();
                } else {
                    callback(new Error("输入两次的密码不一致"));
                }
            }, trigger: "blur"
        },
    ],
    code: [
        { required: true, message: "请输入届次编号", trigger: "blur" },
        { pattern: /^[1-9]\d*$/, message: "请输入正整数", trigger: "blur" },
    ],
    
};

// 取消提交
function InfoCancel() {
    InfoForm.value.resetFields();
};

// 确认提交
function InfoConfirm() {
    modifyRsInfoRef.value.validate((valid) => {
        if (!valid) {
            return false;
        }
        // 调用接口
    });
};

// 确认二次弹窗验证
ElMessageBox.confirm(
    `确定取消报名吗？`,
    '提示',
    {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }
).then(() => {
    // 调用接口
}).catch(() => {
    ElMessage.info('已取消操作');
});

// 未完成则loading
let loading = ref(null);
function creatTicket(id) {
    loading.value = ElLoading.service({
        lock: true,
        text: '正在生成，请稍后!',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.4)',
    });
    ElMessage.success('正在生成，请耐心等待!');
    if (res.data.code === 200) {
        loading.value.close(); // 成功关闭
    }
}