绑定ref
使用动态rules
勿忘定义ref变量,给el-form-item绑定prop绑定对应的变量
<el-form
ref="ruleFormRef"
:model="ruleForm"
:rules="rules"
label-width="120px"
class="demo-ruleForm"
:size="formSize"
status-icon
>
<el-form-item label="社团图片" prop="img">
<el-upload
action="#"
list-type="picture-card"
:auto-upload="false"
>
<el-icon><Plus /></el-icon>
<template #file="{ file }">
<div>
<img
class="el-upload-list__item-thumbnail"
:src="file.url"
alt=""
/>
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
>
<el-icon><zoom-in /></el-icon>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleDownload(file)"
>
<el-icon><Download /></el-icon>
</span>
<span
v-if="!disabled"
class="el-upload-list__item-delete"
@click="handleRemove(file)"
>
<el-icon><Delete /></el-icon>
</span>
</span>
</div>
</template>
</el-upload>
<el-dialog v-model="dialogVisible">
<img
w-full
:src="dialogImageUrl"
alt="Preview Image"
class="dialog-img"
/>
</el-dialog>
</el-form-item>
<el-form-item label="社团名称" prop="name">
<el-input v-model="ruleForm.name" />
</el-form-item>
<el-form-item label="社团负责人" prop="responsible">
<el-input v-model="ruleForm.responsible" />
</el-form-item>
<el-form-item label="社团联系方式" prop="phone">
<el-input v-model="ruleForm.phone" />
</el-form-item>
<el-form-item label="社团代理老师" prop="teacher">
<el-input v-model="ruleForm.teacher" />
</el-form-item>
<el-form-item label="社团规模" prop="delivery">
<el-select
v-model="ruleForm.delivery"
placeholder="请输入社团人数"
>
<el-option label="20" value="20" />
<el-option label="50" value="50" />
<el-option label="80" value="80" />
<el-option label="100" value="100" />
<el-option label="120" value="120" />
<el-option label="150" value="150" />
<el-option label="180" value="180" />
<el-option label="200" value="200" />
</el-select>
</el-form-item>
<el-form-item label="社团所属学院" prop="college">
<el-select v-model="ruleForm.college" placeholder="请选择学院">
<el-option label="计算机学院" value="计算机学院" />
<el-option label="旅游学院" value="旅游学院" />
<el-option label="信创学院" value="信创学院" />
<el-option label="机电学院" value="机电学院" />
<el-option label="空乘学院" value="空乘学院" />
<el-option label="纺织学院" value="纺织学院" />
<el-option label="商学院" value="商学院" />
</el-select>
</el-form-item>
<el-form-item label="社团招新时间">
<el-col :span="11">
<el-date-picker
v-model="ruleForm.date1"
type="date"
placeholder="开始时间"
style="width: 100%"
/>
</el-col>
<el-col :span="2" class="text-center">
<span class="text-gray-500">-</span>
</el-col>
<el-col :span="11">
<el-date-picker
v-model="ruleForm.date2"
placeholder="结束时间"
style="width: 100%"
/>
</el-col>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm(ruleFormRef)">
提交
</el-button>
<el-button @click="resetForm(ruleFormRef)">重置</el-button>
</el-form-item>
</el-form>
const ruleFormRef = ref()
const ruleForm = reactive({
img: '',
name: '',
responsible: '',
phone: '',
teacher: '',
delivery: '',
college: '',
date1: '',
date2: '',
})
const rules = reactive({
name: [
{ required: true, message: '请输入社团名称', trigger: 'blur' },
{ min: 3, max: 15, message: '长度必须为3-15位', trigger: 'blur' },
],
responsible: [
{ required: true, message: '请输入社团负责人名称', trigger: 'blur' },
{ min: 3, max: 15, message: '长度必须为3-15位', trigger: 'blur' },
],
phone: [
{ required: true, message: '请输入联系方式', trigger: 'blur' },
{ min: 11, max: 11, message: '长度必须为11位', trigger: 'blur' },
],
teacher: [
{ required: true, message: '请输入社团代理老师', trigger: 'blur' },
{ min: 3, max: 15, message: '长度必须为3-15位', trigger: 'blur' },
],
delivery: [
{
required: true,
message: '请选择社团规模',
trigger: 'change',
},
],
college: [
{
required: true,
message: '请选择社团所属学院',
trigger: 'change',
},
],
date1: [
{
type: 'date',
required: true,
message: 'Please pick a date',
trigger: 'change',
},
],
date2: [
{
type: 'date',
required: true,
message: 'Please pick a time',
trigger: 'change',
},
],
})
const submitForm = async (formEl) => {
if (!formEl) return
await formEl.validate((valid, fields) => {
if (valid) {
alter('校验成功')
} else {
alter('校验失败')
}
})
}
const resetForm = (formEl) => {
if (!formEl) return
formEl.resetFields()
}