// 提交之前先自动校验 const submitHandler = () => { // 得到所有的校验数据 const data = formModel.check(values); dispatch({ type: 'checkMsg', data }); const hasError = Object.keys(data).find(item => { return data[item].hasError; }); if (hasError === undefined && onClick) {...
在这里我不太理解prop为什么要写成"'tableData.' + scope.$index + '.' + item.prop"这个样子就实现了校验的效果。后来在一次项目中偶然去查看了一下el-form的源码,才明白其中的道理; 首先我们看到el-form组件的文件路径是这样的,那么其实form-item是一个单独的组件,我们通过form -> form-item嵌套的时候,其...
},false);// this.bindClick是为了取消监听,下文会进行描述// 判断点击是否为table区域judgeClickDom(e) {const{ target } = e;lettableDom =document.getElementsByClassName("table");// getElementsByClassName获取到的是数组,一定要有下标不然会报错// 如果我们点击的区域在表格外保存数据if(!tableDom[0].cont...
表格是el-table自动获取的后台数据,每行都有el-input的验证,这样一个rules的规则就不能匹配到每一行,所以要是用动态的prop和rules规则 关键一 此处data中定义的变量,params:表格数据,后台查询获得;paramsRules:校验规则 关键二 此处:model、:rules 关键三 此处:prop="'params.' + scope.$index + '.min'"和:...
data(){return{// 用于校验表格的formtableForm:{items:[]},//字段表格数据modelFieldList:[],// 表单校验rules:{mid:[{required:true,message:"模型ID不能为空",trigger:"change"}],dataAttr:[{required:true,message:"数据属性不能为空",trigger:"change"}],showName:[{required:true,message:"显示名称...
网上查了很多表格校验的,但是都不是自定义校验,需要保证设置促销价大于0小于原价,这时需要校验时拿到每一行的数据来对比 <el-formlabel-width="110"ref="formValidate":rules="ruleCustom":model="formValidate"><el-tableref="listDataDetail"@selection-change="select":data="formValidate.selectList1"@clearSele...
简介:element-ui的el-table与el-form的使用与表单校验 目前做的项目后台管理系统,用到了el-form中嵌套el-table,并且需要非空验证,效果图如下: 废话不多说,直接上代码 <el-formv-loading="loading":model="currBillType":rules="currBillType.rules"style="height: calc(100% - 95px)"><el-table:data="...
data() { return { formData: { visitorName: '', cardType: 1, cardCode: '' }, rule: { visitorName: [ { required: true, message: '请输入姓名', trigger: 'blur' }, { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }, { required: true, pattern: /^...
return{tableData:[],teaName:'',page:1,total:0,pageSize:12,classData:[],show:false,dra:false,direction:'rtl',addFom:{teaName:'',teaSex:true,teaType:true,teaPhone:'',seniority:0,classIds:[{}]},classAll:[],disabled:false,rules:{teaName:[{required:true,message:'请输入教师名称',trig...