iview表单

本文主要是介绍iview表单，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.表单如下图所示：

<Card style="width:100%"><p slot="title">员工信息录入</p><div style="width:80%;display:flex;justify-content:center"><Formref="employeeForm":model="employeeForm":rules="employeeFormRule":label-width="80"style="width:50%"><FormItemlabel="工号"prop="user_number"><Inputv-model="employeeForm.user_number"placeholder="请输入工号"/></FormItem><FormItemlabel="姓名"prop="user_name"><Inputv-model="employeeForm.user_name"placeholder="请输入姓名"/></FormItem><FormItemlabel="部门"prop="dept_id"><Selectfilterableclearablev-model="employeeForm.dept_id"placeholder="请选择部门"><Optionv-for="item in deptList":value="item.value":label="item.label":key="item.value"></Option></Select><div style="margin:20px 0 0 0;">（如果部门未在下拉选项中，请按照“xx-xx”的格式填写新的部门名称）</div></FormItem><FormItemlabel="新部门名"prop="new_dept_name"><Inputtype="text"v-model="employeeForm.new_dept_name"/></FormItem><FormItem><Buttontype="primary"@click="addPerson('employeeForm')">新增</Button><Buttontype="warning"@click="resetForm">重置</Button></FormItem></Form></div></Card>

script中：

data(){return{employeeForm:{user_number:'',//工号user_name:'',//姓名dept_id:'',//部门idnew_dept_name:'',//新部门名},deptList:'',//部门组employeeFormRule:{user_number:[{required:true,message:"请填写工号",trigger:'blur'}],user_name:[{required:true,message:'请填写姓名',trigger:'blur'}]}}}, methods:{addPerson(name){this.$refs[name].validate((valid)=>{if(valid){this.$Message.success('Success!!')}else{this.$Message.warning('请填写必填项')}})},resetForm(name){this.$refs[name].resetFields()}}

需要注意的是：

1.重置表单，需要给表单Form设置ref，然后通过this.$refs[ref名].resetFields()重置表单。

2.当添加表单校验规则时，需要给表单Form设置rules，并在data中定义rule。在提交检验表单时一定要定义函数参数，即绑定的表单ref名。接着通过this.refs[name].validate((valid)=>{})进行后续操作。

这篇关于iview表单的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---