什么是网站链接优化,模板做的网站 怎么提升排名,开放平台api,网易企业邮箱怎么登录项目场景#xff1a;
项目需求#xff1a;在表格中实现动态加减数据#xff0c;并且每行表格内的输入框#xff0c;都要动态校验数据#xff0c;校验不通过#xff0c;不让提交数据#xff0c;并且由于表格内部空间较小#xff0c;我仅保留红边框提示#xff0c;文字…项目场景
项目需求在表格中实现动态加减数据并且每行表格内的输入框都要动态校验数据校验不通过不让提交数据并且由于表格内部空间较小我仅保留红边框提示文字提示给隐藏了不然表格内的框会很大很难看。
如果你需要提示的话不要show-message属性 Form refformDynamic:modelobj:label-width15:show-messagefalse //去掉这一行代码就显示校验错误信息了inline问题描述
提示在表格中实现动态加减数据并且每行表格内的输入框都要动态校验数据 原因分析 提示这里我并没有用viewUI的table组件用的是原生html做的表格然后样式做成和table组件相似我不用table组件是因为组件限制太多组件用v-for渲染表格达不到项目需求并且内部prop也检测不到校验。 这边的代码是精简的里面核心的代码就在这如果不是很明白的话下面有全部代码 Form refformDynamic:modelobj:label-width15:show-messagefalseinlinetable idformDynamic styleborder: 1px solid #e8eaec;border-collapse: collapse;th styleborder: 1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9保险费用/thtr v-for(item, index) in obj.modelData:keyindexstyleborder: 1px solid #e8eaectd styleborder: 1px solid #e8eaec;padding: 7pxFormItemlabel :propmodelData.index.insuranceFee:rules[{required: true, type:number, message: 请输入, trigger: blur},{pattern:/^(0|([1-9]\d*))(\.\d{1,2})?$/, message: 请输入正数}]Inputv-model.trim.numberobj.modelData[index].insuranceFee:show-word-limittrue:maxlength10:disabledBoolean(flag)/Input/FormItem/td/tr/table/Form解决方案 提示全部代码 templateForm refformDynamic:modelobj:label-width15:show-messagefalseinlinetable idformDynamic styleborder: 1px solid #e8eaec;border-collapse: collapse;th styleborder: 1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9保险编号/thth styleborder: 1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9保险费用/thth styleborder: 1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9保险类型/thth styleborder: 1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9保险应收/thth styleborder: 1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9保险实收/thth styleborder: 1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9保单欠款/thth styleborder: 1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9收费开始时间/thth styleborder: 1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9收费截止时间/thth styleborder: 1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9备注/thth styleborder: 1px solid #e8eaec;padding: 8px 0;background-color: #f8f8f9操作/thtr v-for(item, index) in obj.modelData:keyindexstyleborder: 1px solid #e8eaec!-- 保险编号--td styleborder: 1px solid #e8eaec;padding: 7pxFormItemlabel :propmodelData.index.insuranceIdstylewidth: 120px:rules{required: true, message: 请输入, trigger: change}Selectv-if!Boolean(flag)transferv-modelobj.modelData[index].insuranceIdon-changechangeBd(item,index)Optionv-foritem in policyData:valueitem.id:keyitem.id{{ item.insuranceCode }}/Option/SelectInput v-else :disabledBoolean(flag) v-modelobj.modelData[index].insuranceCode/Input/FormItem/td!-- 保险费用--td styleborder: 1px solid #e8eaec;padding: 7pxFormItemlabel :propmodelData.index.insuranceFee:rules[{required: true, type:number, message: 请输入, trigger: blur},{pattern:/^(0|([1-9]\d*))(\.\d{1,2})?$/, message: 请输入正数}]Inputv-model.trim.numberobj.modelData[index].insuranceFee:show-word-limittrue:maxlength10:disabledBoolean(flag)/Input/FormItem/td!-- 保险类型--td styleborder: 1px solid #e8eaec;padding: 7pxFormItemlabel :propmodelData.index.insuranceType:rules{required: true, message: 请输入}Input typetext disabled v-modelitem.insuranceType placeholder请输入.../Input/FormItem/td!-- 保险应收--td styleborder: 1px solid #e8eaec;padding: 7pxFormItemlabel :propmodelData.index.insuranceReceivables:rules[{required: true, type:number, message: 请输入, trigger: blur},{pattern:/^(0|([1-9]\d*))(\.\d{1,2})?$/, message: 请输入正数}]Inputv-model.trim.numberobj.modelData[index].insuranceReceivableson-changecalculateCost(item,index):show-word-limittrue:maxlength10:disabledBoolean(flag)inpute handleInput(e,insuranceReceivables)/Input/FormItem/td!-- 保险实收--td styleborder: 1px solid #e8eaec;padding: 7pxFormItemlabel :propmodelData.index.insurancePaid:rules[{required: true, type:number, message: 请输入, trigger: blur},{pattern:/^(0|([1-9]\d*))(\.\d{1,2})?$/, message: 请输入正数}]Inputv-model.trim.numberobj.modelData[index].insurancePaidon-changecalculateCost(item,index):show-word-limittrue:maxlength10/Input/FormItem/td!-- 保险欠款--td styleborder: 1px solid #e8eaec;padding: 7pxFormItemlabel :propmodelData.index.insuranceDebt:rules[{required: true, validator: , message: 请输入,type:number, trigger: blur},{pattern:/^(0|([1-9]\d*))(\.\d{1,2})?$/, message: 请输入正数}]Inputv-model.trim.numberobj.modelData[index].insuranceDebtdisabled/Input/FormItem/td!-- 收费开始时间--td styleborder: 1px solid #e8eaec;padding: 7pxFormItemlabel :propmodelData.index.startTime:rules{required: true, message: 请输入}DatePicker typedatetransferformatyyyy-MM-ddon-changeobj.modelData[index].startTime $event, setOptions($event,item,index,start)placeholder开始时间v-modelobj.modelData[index].startTime:disabledBoolean(flag)!-- on-changemodelData[index].startTime $event--/DatePicker/FormItem/td!-- 收费截止时间--td styleborder: 1px solid #e8eaec;padding: 7pxFormItemlabel :propmodelData.index.endTime:rules{required: true, message: 请输入}DatePicker typedatetransferformatyyyy-MM-dd:optionstimeOptions[timeIndex]placeholder截止时间on-changeobj.modelData[index].endTime $eventon-open-changesetOptions($event,item,index, end)v-modelobj.modelData[index].endTime:disabledBoolean(flag)/DatePicker/FormItem/td!-- 备注--td styleborder: 1px solid #e8eaec;padding: 7pxFormItemlabel:label-width0:propmodelData.index.remarkInputv-modelobj.modelData[index].remark:show-word-limittrue:maxlength100:disabledBoolean(flag)/Input/FormItem/td!-- 操作--td styleborder: 1px solid #e8eaec;padding: 0px 7px 0px 7px;width: 180px;text-align: centerButton typeprimary style clickcuteFTP(row,index)v-permissionalliance:business:record:insurance:upload上传/ButtonPoptipv-if!flagconfirm:transfertruetitle你确定删除吗on-okdelInsurance(index)Button typeerrorIcon typemd-trash/删除/Button/Poptip/td/tr/table/Form/template
