建站推广哪里有建站新闻资讯,编程平台,云计算 网站建设,河北邯郸网络科技公司有哪些之前做得比较多的校验是在el-form表单里做的#xff0c;但有时也遇到#xff0c;需要在table内输入数据#xff0c;然后校验输入的数据是否符合要求的情况。因此记录一下。
思路#xff1a; 1.需要借助el-form的校验#xff0c;el-table外层嵌套一层el-form#xff0c;使…之前做得比较多的校验是在el-form表单里做的但有时也遇到需要在table内输入数据然后校验输入的数据是否符合要求的情况。因此记录一下。
思路 1.需要借助el-form的校验el-table外层嵌套一层el-form使用el-form的校验机制 2.由于每行都需要校验因此需要借助scope.$index 3.借助一个提交按钮测试校验
效果 1.不输入数据直接点击“提交”触发校验由于数据没有输入校验不通过给出校验提示 2.点击输入框输入点击某一个字段即正在输入状态这个字段的校验结果就会被清除clearValidate 3.数据都填好之后点击“提交”再次触发校验 4.校验通过显示全屏提示是否提交点击“确定”即可控制台会打印“校验通过 div idappel-form classbase-form refbaseForm :modelbaseForm :rulesrules auto-completeonel-table reftable-input classtable highlight-current-row :databaseForm.demoListel-table-column label姓名 show-overflow-tooltiptemplate slot-scopescopeel-form-item :propdemoList.scope.$index.name :rulesrules.name classallel-input v-modelscope.row.name placeholder请输入 clearable focus$refs.baseForm.clearValidate(demoList.${scope.$index}.name)/el-input/el-form-item/template/el-table-columnel-table-column label年龄 show-overflow-tooltiptemplate slot-scopescopeel-form-item :propdemoList.scope.$index.age :rulesrules.age classallel-input v-modelscope.row.age placeholder请输入 clearable focus$refs.baseForm.clearValidate(demoList.${scope.$index}.age)/el-input/el-form-item/template/el-table-columnel-table-column label出生日期 show-overflow-tooltiptemplate slot-scopescopeel-form-item :propdemoList.scope.$index.birthday :rulesrules.birthday classallel-date-picker placeholder请选择 v-modelscope.row.birthday formatyyyy-MM-dd clearable focus$refs.baseForm.clearValidate(demoList.${scope.$index}.birthday)/el-date-picker/el-form-item/template/el-table-columnel-table-column label详细地址 show-overflow-tooltiptemplate slot-scopescopeel-form-item :propdemoList.scope.$index.address :rulesrules.address classallel-input v-modelscope.row.address placeholder请输入 clearable focus$refs.baseForm.clearValidate(demoList.${scope.$index}.address)/el-input/el-form-item/template/el-table-column/el-table/el-formdiv classflex-c-a margin-top-10el-button clicksubmit提交/el-button/div/divdata数据 baseForm: {demoList: [{name: ,age: ,birthday: ,address: }]},index: 0,rules: {name: [{required: true,message: 请输入姓名,trigger: blur}],age: [{ required: true, message: 请输入年龄, trigger: blur }],birthday: [{ required: true, message: 请选择出生日期, trigger: change }],address: [{ required: true, message: 请输入详细地址, trigger: blur }],}method 给一个提交按钮测试校验
// 提交核对账目
submit() {this.$refs.baseForm.validate((valid) {if (valid) {this.$confirm(您确定【提交】, 提示, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning}).then(() {console.log(校验通过)})}})
}例子里使用的css .all {width: 100%;}.flex-c-a {display: flex;align-items: center;justify-content: space-around;}.margin-top-10 {margin-top: 10px;}.base-form.el-form-item__content {margin-left: 0;}
