element中的form表单整理

表单整理

<template>
	<div class="ceshiBox">
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"  status-icon label-position="left">
			<el-form-item prop="userName" label='用户名:' required>
				<el-input size='mini' v-model='ruleForm.userName' class='width_200'></el-input>
			</el-form-item>
			
			<el-form-item class='oneBox' prop="constitute" label='组合框:' required >
				<el-select size='mini' v-model="ruleForm.constituteValue" placeholder="请选择" >
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
				<el-input size='mini' type="text" v-model="ruleForm.constitute" placeholder="请输入数字" 
				@blur="blurEvent" @focus="focusEvnet" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
			</el-form-item>
			
			<el-form-item prop="pickerDataTime" label='用户名:' required>
				<el-date-picker
					size='mini'
					v-model="ruleForm.pickerDataTime"
					type="daterange"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					class='width_200'
					value-format="yyyy-MM-dd"
					:picker-options="pickerOptions0" >
				</el-date-picker>
			</el-form-item>
			
			  <el-form-item label="活动时间:" required>
				<div style='display: flex;'>
			  <!--  <el-col :span="3"> -->
			      <el-form-item prop="date1">
			        <el-date-picker 
						size='mini'
						v-model="ruleForm.date1" 
						type="date" 
						placeholder="选择日期" 
						class='width_200'
						value-format="yyyy-MM-dd">
					</el-date-picker>
			      </el-form-item>
			    <!-- </el-col> -->
			    <!-- <el-col class="line" :span="1">-</el-col> -->
				<span style="margin: 0px 5px ;"> - </span>
			    <!-- <el-col :span="3"> -->
			      <el-form-item prop="date2">
			        <el-time-picker 
						size='mini'
						v-model="ruleForm.date2" 
						placeholder="选择时间" 
						class='width_200'
						value-format="HH:mm:ss">
					</el-time-picker>
			      </el-form-item>
			    <!-- </el-col> -->
				</div>
			  </el-form-item>
			  
			  <el-form-item label="switch开关:" prop="delivery">
			      <el-switch 
				  v-model="ruleForm.delivery"
				    active-color="blue"
				    inactive-color="red"
				    active-text="按月付费"
				    inactive-text="按年付费"></el-switch>
			  </el-form-item>
			  
			    <el-form-item label="多选" prop="checkbox" required>
			      <el-checkbox-group v-model="ruleForm.checkbox">
						<el-checkbox v-for="(item,index) in checkboxList" :key="item" :label="item"></el-checkbox>
					  </el-checkbox>
			      </el-checkbox-group>
			    </el-form-item>
				
				  <el-form-item label="单选" prop="radio" required>
				    <el-radio-group v-model="ruleForm.radio">
				      <el-radio  v-for="(item,index) in radioList" :key="item.value" :label="item.label"></el-radio>
				    </el-radio-group>
				  </el-form-item>
			
			<div style="text-align: right;margin-right: 200px;">
				<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
				<el-button @click="resetForm('ruleForm')">重置</el-button>
			</div>
		</el-form>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				ruleForm: {
					userName: "",
					constituteValue:'选项1',
					constitute:'',
					pickerDataTime:[],
					date1:new Date(),
					date2:new Date(),
					delivery:false,
					checkbox:[ '散客',  '钻石',],//复选框选中的值
					radio:'第一个',
				},
				rules: {
					userName: [{ required: true,message: '请输入活动名称',trigger: 'blur'}, ],
					constitute: [{ required: true,message: '请输入数字',trigger: 'blur'}],
					pickerDataTime: [{ required: true,message: '请选择日期',trigger: 'blur'}],
					date1: [{ required: true, message: '请选择日期', trigger: 'change' }],
					date2: [{required: true, message: '请选择时间', trigger: 'change' }],
					checkbox: [{ type: 'array', required: true, message: '请至少选择一个多选', trigger: 'change' } ],
					radio: [ { required: true, message: '请选择单选项', trigger: 'change' }],
				},
				
				pickerOptions0: {
					disabledDate(time) {
						return time.getTime() < Date.now();
					}
				},
				
				options: [
					{value: '选项1',label: '全部'}, 
					{value: '选项2',label: '第二个'},
				],
				checkboxList:[ '散客',  '会员', '黄金' , '钻石'],
				radioList:[
					{value: 'one',label: '第一个'},
					{value: 'two',label: '第二个'},
					{value: 'three',label: '第三个'},
				],
			}
		},
		created() {
			this.ruleForm.pickerDataTime[0] = new Date()
			this.ruleForm.pickerDataTime[1] = new Date()
		},
		methods: {
			// 提交
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						console.log("submit")
						console.log(this.ruleForm)
					} else {
						console.log('error submit!!');
						if(this.ruleForm.constitute === ''){// 组合框 提交时表单验证样式
							document.getElementsByClassName("oneBox")[0].children[1].style.border='1px solid #F56C6C'
						}
						return false;
					}
				});
			},
			// 重置
			resetForm(formName){
				this.$refs[formName].resetFields();
				document.getElementsByClassName("oneBox")[0].children[1].style.border='1px solid #DCDFE6'
			},
			// 组合框 input聚焦时
			focusEvnet(){
				if(this.ruleForm.constitute !== ''){// 组合框 input不为空时表单验证样式
					document.getElementsByClassName("oneBox")[0].children[1].style.border='1px solid #409EFF'
				}
			},
			// 组合框 input失焦时  
			blurEvent(){
				if(this.ruleForm.constitute === ''){// 组合框 input为空时表单验证样式
					document.getElementsByClassName("oneBox")[0].children[1].style.border='1px solid #F56C6C'
				}else{
					document.getElementsByClassName("oneBox")[0].children[1].style.border='1px solid #DCDFE6'
				}
			},
		}
	}
</script>

<style  scoped="scoped" lang="scss">
	::v-deep .oneBox .el-form-item__content {
		display: flex;
		justify-content: space-around;
		border: 1px solid #C0C4CC;
		border-radius: 4px;
		width: 200px;
		margin-top: 6px;
		.el-input--mini{
			height: 29px;
			line-height: 29px;
		}
		.el-input__inner {
			border: none;
		}
	}
	.width_200{
		width: 200px;
	}
</style>

• status-icon 是否在输入框中显示校验结果反馈图标 boolean — false
  <el-form status-icon >
  
• 去掉表单验证的async-validator: ["userName is required"]的警告
  
  在node_modules/async-validator/es/util.js中找到图中console.warn(type, errors);注释掉
  

待续。。。