基于element-ui封装一个完整的form表单,其中包括时间,select,input,checkbox,upload上传且支持表单校验,自定义校验
时间: 2024-03-20 15:39:31 浏览: 73
element-ui CheckBox全选.txt
好的,我可以为您提供一份基于element-ui封装的完整form表单代码,包括时间、select、input、checkbox、upload上传,并支持表单校验和自定义校验。
代码如下:
```html
<template>
<el-form ref="form" :model="formData" :rules="formRules" label-width="100px" style="max-width: 600px;">
<el-form-item label="时间">
<el-date-picker v-model="formData.time" type="datetime" placeholder="请选择时间"></el-date-picker>
</el-form-item>
<el-form-item label="选择">
<el-select v-model="formData.select" placeholder="请选择">
<el-option label="选项1" value="option1"></el-option>
<el-option label="选项2" value="option2"></el-option>
<el-option label="选项3" value="option3"></el-option>
</el-select>
</el-form-item>
<el-form-item label="输入">
<el-input v-model="formData.input" placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="多选框">
<el-checkbox-group v-model="formData.checkbox">
<el-checkbox label="选项1"></el-checkbox>
<el-checkbox label="选项2"></el-checkbox>
<el-checkbox label="选项3"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="上传">
<el-upload
class="upload-demo"
action="/upload"
:on-success="handleSuccess"
:on-error="handleError"
:before-upload="beforeUpload"
:file-list="fileList"
:limit="3"
:on-exceed="handleExceed"
:show-file-list="false">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
<el-button @click="resetForm">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
formData: {
time: '',
select: '',
input: '',
checkbox: [],
fileList: []
},
formRules: {
time: [{ required: true, message: '请选择时间', trigger: 'change' }],
select: [{ required: true, message: '请选择', trigger: 'change' }],
input: [{ required: true, message: '请输入', trigger: 'blur' }]
}
};
},
methods: {
// 上传相关方法
handleSuccess(response, file, fileList) {
console.log(response, file, fileList);
},
handleError(error, file, fileList) {
console.log(error, file, fileList);
},
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
},
// 表单相关方法
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
this.$message.success('提交成功');
} else {
this.$message.error('表单校验失败,请检查表单信息');
return false;
}
});
},
resetForm() {
this.$refs.form.resetFields();
}
}
};
</script>
```
以上代码使用了element-ui提供的组件,其中包括el-date-picker、el-select、el-input、el-checkbox-group、el-upload等组件,同时也支持表单校验和自定义校验。
表单数据通过formData来绑定,表单校验规则通过formRules来绑定。表单提交时调用submitForm方法,表单重置时调用resetForm方法。
期望这份代码能够对您有所帮助。
阅读全文