Vue3初学之Element-plus Form表单

1.使用 el-form 组件
el-form 是一个表单容器，可以包含多个 el-form-item，每个 el-form-item 包裹具体的表单控件，如输入框、选择器、日期选择器等。

<template><el-form :model="form" label-width="120px"><el-form-item label="用户名"><el-input v-model="form.username"></el-input></el-form-item><el-form-item label="密码"><el-input v-model="form.password" type="password"></el-input></el-form-item><el-checkbox-group v-model="checkList"><el-checkbox label="Option A" value="Value A" /><el-checkbox label="Option B" value="Value B" /><el-checkbox label="Option C" value="Value C" /><el-checkbox label="disabled" value="Value disabled" disabled /><el-checkboxlabel="selected and disabled"value="Value selected and disabled"disabled/></el-checkbox-group><div class="example-basic"><el-time-picker v-model="value1" placeholder="Arbitrary time" /><el-time-pickerv-model="value2"arrow-controlplaceholder="Arbitrary time"/></div><el-form-item><el-button type="primary" @click="submitForm">提交</el-button></el-form-item></el-form>
</template><script setup>
import { ref } from 'vue';
const checkList = ref(['Value selected and disabled', 'Value A'])
const form = ref({username: '',password: ''
});const submitForm = () => {console.log('提交表单数据:', form.value);console.log('多选',checkList.value,value1,value2);
};
const value1 = ref()
const value2 = ref()
</script><style>
.example-basic .el-date-editor {margin: 8px;
}
</style>

2.Transter
比较使用的功能，可以跟官网学习

3. 表单校验
   该功能也是非常使用的功能，用于学习

<template><el-formref="ruleFormRef"style="max-width: 600px":model="ruleForm":rules="rules"label-width="auto"class="demo-ruleForm":size="formSize"status-icon><el-form-item label="Activity name" prop="name"><el-input v-model="ruleForm.name" /></el-form-item><el-form-item label="Activity zone" prop="region"><el-select v-model="ruleForm.region" placeholder="Activity zone"><el-option label="Zone one" value="shanghai" /><el-option label="Zone two" value="beijing" /></el-select></el-form-item><el-form-item label="Activity count" prop="count"><el-select-v2v-model="ruleForm.count"placeholder="Activity count":options="options"/></el-form-item><el-form-item label="Activity time" required><el-col :span="11"><el-form-item prop="date1"><el-date-pickerv-model="ruleForm.date1"type="date"aria-label="Pick a date"placeholder="Pick a date"style="width: 100%"/></el-form-item></el-col><el-col class="text-center" :span="2"><span class="text-gray-500">-</span></el-col><el-col :span="11"><el-form-item prop="date2"><el-time-pickerv-model="ruleForm.date2"aria-label="Pick a time"placeholder="Pick a time"style="width: 100%"/></el-form-item></el-col></el-form-item><el-form-item label="Instant delivery" prop="delivery"><el-switch v-model="ruleForm.delivery" /></el-form-item><el-form-item label="Activity location" prop="location"><el-segmented v-model="ruleForm.location" :options="locationOptions" /></el-form-item><el-form-item label="Activity type" prop="type"><el-checkbox-group v-model="ruleForm.type"><el-checkbox value="Online activities" name="type">Online activities</el-checkbox><el-checkbox value="Promotion activities" name="type">Promotion activities</el-checkbox><el-checkbox value="Offline activities" name="type">Offline activities</el-checkbox><el-checkbox value="Simple brand exposure" name="type">Simple brand exposure</el-checkbox></el-checkbox-group></el-form-item><el-form-item label="Resources" prop="resource"><el-radio-group v-model="ruleForm.resource"><el-radio value="Sponsorship">Sponsorship</el-radio><el-radio value="Venue">Venue</el-radio></el-radio-group></el-form-item><el-form-item label="Activity form" prop="desc"><el-input v-model="ruleForm.desc" type="textarea" /></el-form-item><el-form-item><el-button type="primary" @click="submitForm(ruleFormRef)">Create</el-button><el-button @click="resetForm(ruleFormRef)">Reset</el-button></el-form-item></el-form>
</template><script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'interface RuleForm {name: stringregion: stringcount: stringdate1: stringdate2: stringdelivery: booleanlocation: stringtype: string[]resource: stringdesc: string
}const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({name: 'Hello',region: '',count: '',date1: '',date2: '',delivery: false,location: '',type: [],resource: '',desc: '',
})const locationOptions = ['Home', 'Company', 'School']const rules = reactive<FormRules<RuleForm>>({name: [{ required: true, message: 'Please input Activity name', trigger: 'blur' },{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },],region: [{required: true,message: 'Please select Activity zone',trigger: 'change',},],count: [{required: true,message: 'Please select Activity count',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',},],location: [{required: true,message: 'Please select a location',trigger: 'change',},],type: [{type: 'array',required: true,message: 'Please select at least one activity type',trigger: 'change',},],resource: [{required: true,message: 'Please select activity resource',trigger: 'change',},],desc: [{ required: true, message: 'Please input activity form', trigger: 'blur' },],
})const submitForm = async (formEl: FormInstance | undefined) => {if (!formEl) returnawait formEl.validate((valid, fields) => {if (valid) {console.log('submit!')} else {console.log('error submit!', fields)}})
}const resetForm = (formEl: FormInstance | undefined) => {if (!formEl) returnformEl.resetFields()
}const options = Array.from({ length: 10000 }).map((_, idx) => ({value: `${idx + 1}`,label: `${idx + 1}`,
}))
</script>