当前位置: 首页 > Web前端 > HTML

在antdvue表格表格中添加表格验证方法(表格中可能存在循环判断)

时间:2023-04-02 21:29:56 HTML

业务需求;表格中的某些项目或某些项目需要可编辑;和验证规则是必需的1.将表单模型放在表格中row.siteId":rowSelection="{selectedRowKeys:selectedRowKeysSite,onChange:onChangeSite,columnWidth:50}":pagination="paginationSite"@change="handleTableChangeSite":showToolbar="false">win.document.body"/>for(constkeyin_this.$refs){if(key==='con')break_this.$refs[key].validate(asyncvalid=>{if(!valid)returnfalse})}方法2.将表放置在form-model内row.siteId":rowSelection="{selectedRowKeys:selectedRowKeysSite,onChange:onChangeSite,columnWidth:50}":pagination="paginationSite"@change="handleTableChangeSite":showToolbar="false">win.document.body"/>_this.$refs.formData.validate(asyncvalid=>{if(!valid)return})重点是:prop="siteList.${index}.endTime"方法三:演化2->表格在form-model中;表格是数组循环的内容4"@click="handleArr('add')">新增添加点index":pagination="false":showToolbar="false">{{index+1}}

rules:{companyId:[{required:true,message:'Pleaseenter'}],//props不在表中companyName:[{required:true,message:'Pleaseenter'}],//props在表中...}asynccheckItem(index){try{returnawaitthis.$refs[`table_${index}`][0].validate()}catch(error){returnfalse}},//直接调用check函数可以asynccheck(){constresult_arr=[]this.value.contactList.forEach((el,index)=>{result_arr.push(this.checkItem(index))})try{//添加另一个表单模型验证constformData=this.$refs.formData.validate().then(res=>res).catch(err=>err)constall=awaitPromise.all(result_arr);if([...all,formData].includes(false)){returnfalse}returntrue}catch(error){返回false}}