表单
说明：
1、必填项设置，在el-form上通过rules属性传入约定的验证规则， el-form-item标签上添加prop属性设置为需要检验的字段名，最后在return里面定义rules
2、最外层 div 上的margin、padding控制div的外边距和内边距，四个值分别为上、右、下、左
3、rules表单验证，el-form-item上添加prop验证规则，prop值为当前需要验证的表单的绑定值，demo中提供了手机号、email和密码长度验证
4、使用clearable属性即可得到一个可清空的输入框
5、resetFields方法重置表单，el-form-item 上设置prop属性即可重置表单，不设置不重置
6、如果表单在dialog中，执行表单的验证提交，重置操作需要在外层加入 this.$nextTick(() => {}) -- 在DOM渲染结束后执行
this.$nextTick(() => {
// 要执行的代码
})
7、通过 disabled 属性指定是否禁用 input 组件
<el-input placeholder="请输入内容" v-model="input1" :disabled="true"></el-input>
8、表单验证点击保存按钮的验证执行以下代码 -- 添加一下代码（并且在form上添加 ref 属性 -- ref="xxx" formName 即为传入的ref值）
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
<div style="padding: 0px 0px 0px 0px;margin: 0px 0px 0px 0px;">
<el-form :inline="true" :rules="rules" :model="ruleForm" label-position="right" class="demo-form-inline conponentForm" label-width="90px" size="small">
<el-row>
<el-col :span="24">
<el-form-item label="手机号 : " prop="phoneVerification">
<el-input clearable size="small" v-model="ruleForm.phoneVerification" placeholder="请输入手机号"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="邮箱 : " prop="emailVerification">
<el-input size="small" v-model="ruleForm.emailVerification" placeholder="请输入邮箱"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="密码 : " prop="numVerification">
<el-input size="small" v-model="ruleForm.numVerification" placeholder="请输入"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="日期 : " prop="dateSelection">
<div class="searchTime" style="width: 100%">
<el-date-picker
size="small"
v-model="ruleForm.dateSelection"
type="date"
placeholder="选择日期">
</el-date-picker>
</div>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="项目编号 : " prop="itemNumber">
<el-input size="small" v-model="ruleForm.itemNumber" placeholder="请输入项目编号"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="描述 : ">
<el-input
type="textarea"
:rows="2"
placeholder="请输入内容"
v-model="ruleForm.textarea">
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="跟踪人 : ">
<el-input size="small" v-model="ruleForm.trackingPeople" placeholder="请选择" suffix-icon="el-icon-search"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-row :gutter="10">
<el-col :span="12"><el-form-item label="开始日期 : ">
<div class="searchTime" style="width: 100%">
<el-date-picker
size="small"
v-model="ruleForm.beginTime"
type="date"
placeholder="选择日期">
</el-date-picker>
</div>
</el-form-item></el-col>
<el-col :span="12"><el-form-item label="结束日期 : ">
<div class="searchTime" style="width: 100%">
<el-date-picker
size="small"
v-model="ruleForm.endTime"
type="date"
placeholder="选择日期">
</el-date-picker>
</div>
</el-form-item></el-col>
</el-row>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="项目状态 : ">
<el-select v-model="ruleForm.itemState" placeholder="请选择" size="small">
<el-option
v-for="item in options2"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="性别 : ">
<el-radio-group v-model="ruleForm.gender">
<el-radio :label="0">男</el-radio>
<el-radio :label="1">女</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="栏目 : ">
<el-checkbox-group v-model="ruleForm.checkList">
<el-checkbox label="0">旅游</el-checkbox>
<el-checkbox label="1">音乐</el-checkbox>
<el-checkbox label="2">美术</el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
import BaseCard from '@/components/BaseCard/BaseCard'
export default {
components: {
BaseCard
},
data() {
var changePhone = (rule, value, callback) => {
console.log(value)
if (!value) {
return callback(new Error('手机号不能为空'))
}
setTimeout(() => {
var reg = /^[1][3,4,5,7,8][0-9]{9}$/
var regus = new RegExp(reg)
if (regus.test(value)) {
callback()
} else {
callback(new Error('请输入正确的手机号'))
}
}, 100)
}
var changeEmail = (rule, value, callback) => {
if (!value) {
return callback(new Error('邮箱不能为空'))
}
setTimeout(() => {
var reg = /^([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
var regus = new RegExp(reg)
if (regus.test(value)) {
callback()
} else {
callback(new Error('请输入正确的邮箱'))
}
}, 100)
}
var changeNum = (rule, value, callback) => {
if (!value) {
return callback(new Error('密码不能为空'))
}
setTimeout(() => {
// var reg = '^\\d{0,6}$'
// var regus = new RegExp(reg)
console.log(value.length)
if (value.length > 6) {
callback()
} else {
callback(new Error('密码长度必须大于6位'))
}
}, 100)
}
return {
options2: [{
value: '0',
label: '开始'
}, {
value: '1',
label: '未开始'
}],
ruleForm: {
phoneVerification: '',
emailVerification: '',
numVerification: '',
dateSelection: '',
itemNumber: '',
textarea: '',
beginTime: '',
endTime: '',
itemState: '',
trackingPeople: '',
gender: 0,
checkList: ['0']
},
rules: {
phoneVerification: [ // 手机号验证
{ required: true, validator: changePhone, trigger: 'blur' }
],
emailVerification: [ // 邮箱验证
{ required: true, validator: changeEmail, trigger: 'blur' }
],
numVerification: [ // 长度验证
{ required: true, validator: changeNum, trigger: 'blur' }
],
dateSelection: [
{ required: true, message: '请选择日期', trigger: 'blur' }
],
itemNumber: [
{ required: true, message: '请输入项目编号', trigger: 'blur' }
]
}
}
},
methods: {
resetForm(formName) {
console.log(this.$refs)
this.$refs[formName].resetFields()
},
timeClick() {
if (!this.ruleForm.beginTime) {
this.ruleForm.beginTime = ''
}
console.log(this.ruleForm.beginTime)
}
}
}
<style scoped>
.searchTime > div{
width: 100%;
}
.conponentForm >>> .el-form-item__content{
width: calc(100% - 90px);
}
.conponentForm >>> .el-form-item{
width: 100%;
}
</style>