vue2以及vue3基于el-table实现表格正则校验功能

常见需求：

在项目中，通常会在表格中添加多条数据，并需要对添加的数据进行校验功能，这时候就是很头疼的事了，下面酱酱仔给你们写个示例，你们无脑粘贴复制即可。

注意事项：

1、校验里面用到了正则校验功能，大家可以参考酱酱仔的lgb-x文档lgb-xhttps://yjfk.hgjt.cn:9901后续酱酱仔将会持续迭代更新lgb-x库以及对应的lgb-x文档（lgb-x库不做重复轮子，只做业务场景常用组件以及api公共方法，致力于打造更便捷组件，提升开发效率）

2、示例是vue2.0写法，vue3.0也可以无脑使用，不过需要换成组合式api写法即可。

实现介绍：

1、首先默认给表格数据每行设置 isKeyValid: false ，目的是为了表格一开始打开时候，每行上下边距为0。

  tableData: [{date: "",name: "",address: "",isKeyValid: false,},{date: "",name: "",address: "",isKeyValid: false,},],

2、其次在模版里面表格外层嵌套el-from表单，表格列插槽字段嵌套el-form-item，同时需要动态绑定class样式。

<template><div class="app-container"><div class="table-form">{{ {tableData} }}<div style="margin-right: 0"><el-button type="primary" @click="add">新增</el-button></div><el-form :model="{tableData}" ref="ruleForm" label-width="0px"><el-table :data="tableData" border style="width: 100%"><el-table-column label="日期"><template slot-scope="scope"><div :class="scope.row.isKeyValid ? 'rulesFail' : 'rulePass'"><el-form-itemlabel="":prop="`tableData[${scope.$index}].date`":rules="{validator: validateDate,trigger: ['blur', 'change'],id: scope.$index,},"><el-date-pickerv-model="scope.row.date"value-format="yyyy-MM-dd"type="date"placeholder="选择日期"/></el-form-item></div></template></el-table-column><el-table-column label="姓名"><template slot-scope="scope"><div :class="scope.row.isKeyValid ? 'rulesFail' : 'rulePass'"><el-form-itemlabel="":prop="`tableData[${scope.$index}].name`":rules="{validator: validateName,trigger: ['blur', 'change'],id: scope.$index,},"><el-input type="input" v-model="scope.row.name" /></el-form-item></div></template></el-table-column><el-table-column label="地址"><template slot-scope="scope"><div :class="scope.row.isKeyValid ? 'rulesFail' : 'rulePass'"><el-form-itemlabel="":prop="`tableData[${scope.$index}].address`":rules="{validator: validateAddress,trigger: ['blur', 'change'],id: scope.$index,},"><el-input type="input" v-model="scope.row.address" /></el-form-item></div></template></el-table-column></el-table></el-form><div><el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></div></div></div>
</template>

3、然后再在css里面定义对应的动态绑定的class类名样式，为了清空自带的表格外边距。

<style scoped lang="scss">
::v-deep .el-form-item {margin-bottom: 0 !important;
}.rulesFail {margin: 18px 0 !important;
}.rulePass {margin: 0 !important;
}
</style>

4、最后再methods方法里面写校验逻辑

<script>
export default {name: "DemoPage",components: {},data() {return {tableData: [{date: "",name: "",address: "",isKeyValid: false,},{date: "",name: "",address: "",isKeyValid: false,},],};},methods: {add() {this.tableData.push({date: "",name: "",address: "",isKeyValid: false,});},submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {this.$message.success("校验通过");} else {console.log("error submit!!");return false;}});},resetForm(formName) {this.$refs[formName].resetFields();},//校验日期validateDate(rule, value, callback) {if (value === "" || value === null) {this.tableData[rule.id].isKeyValid = true;callback(new Error("请输入日期"));} else {callback();// if (this.tableFormData.tableData[rule.id].isKeyValid) {//   this.tableFormData.tableData[rule.id].isKeyValid = false;// }}},//校验姓名validateName(rule, value, callback) {const regExp = /^[\u4e00-\u9fa5a-zA-Z]+$/;if (!regExp.test(value)) {this.tableData[rule.id].isKeyValid = true;callback(new Error("请输入有效的姓名（仅限中英文，不包含特殊符号）"));} else {callback();}},//校验地址validateAddress(rule, value, callback) {if (value === "" || value === null) {this.tableData[rule.id].isKeyValid = true;callback(new Error("请输入地址"));} else {callback();}},},
};
</script>

整个demo代码如下：粘贴放到项目页面参考即可

<!--* @Author: lgb1224 185023762@qq.com* @Date: 2024-06-19 11:38:11* @LastEditors: LAPTOP-9J0AUDN8* @LastEditTime: 2024-08-01 17:38:54* @FilePath: \vue-admin\src\views\environmentMonitor\governanceFacilities\sulfurNitrate\index.vue* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template><div class="app-container"><div class="table-form">{{ {tableData} }}<div style="margin-right: 0"><el-button type="primary" @click="add">新增</el-button></div><el-form :model="{tableData}" ref="ruleForm" label-width="0px"><el-table :data="tableData" border style="width: 100%"><el-table-column label="日期"><template slot-scope="scope"><div :class="scope.row.isKeyValid ? 'rulesFail' : 'rulePass'"><el-form-itemlabel="":prop="`tableData[${scope.$index}].date`":rules="{validator: validateDate,trigger: ['blur', 'change'],id: scope.$index,},"><el-date-pickerv-model="scope.row.date"value-format="yyyy-MM-dd"type="date"placeholder="选择日期"/></el-form-item></div></template></el-table-column><el-table-column label="姓名"><template slot-scope="scope"><div :class="scope.row.isKeyValid ? 'rulesFail' : 'rulePass'"><el-form-itemlabel="":prop="`tableData[${scope.$index}].name`":rules="{validator: validateName,trigger: ['blur', 'change'],id: scope.$index,},"><el-input type="input" v-model="scope.row.name" /></el-form-item></div></template></el-table-column><el-table-column label="地址"><template slot-scope="scope"><div :class="scope.row.isKeyValid ? 'rulesFail' : 'rulePass'"><el-form-itemlabel="":prop="`tableData[${scope.$index}].address`":rules="{validator: validateAddress,trigger: ['blur', 'change'],id: scope.$index,},"><el-input type="input" v-model="scope.row.address" /></el-form-item></div></template></el-table-column></el-table></el-form><div><el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></div></div></div>
</template>
<script>
export default {name: "DemoPage",components: {},data() {return {tableData: [{date: "",name: "",address: "",isKeyValid: false,},{date: "",name: "",address: "",isKeyValid: false,},],};},methods: {add() {this.tableData.push({date: "",name: "",address: "",isKeyValid: false,});},submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {this.$message.success("校验通过");} else {console.log("error submit!!");return false;}});},resetForm(formName) {this.$refs[formName].resetFields();},//校验日期validateDate(rule, value, callback) {if (value === "" || value === null) {this.tableData[rule.id].isKeyValid = true;callback(new Error("请输入日期"));} else {callback();// if (this.tableFormData.tableData[rule.id].isKeyValid) {//   this.tableFormData.tableData[rule.id].isKeyValid = false;// }}},//校验姓名validateName(rule, value, callback) {const regExp = /^[\u4e00-\u9fa5a-zA-Z]+$/;if (!regExp.test(value)) {this.tableData[rule.id].isKeyValid = true;callback(new Error("请输入有效的姓名（仅限中英文，不包含特殊符号）"));} else {callback();}},//校验地址validateAddress(rule, value, callback) {if (value === "" || value === null) {this.tableData[rule.id].isKeyValid = true;callback(new Error("请输入地址"));} else {callback();}},},
};
</script>
<style scoped lang="scss">
::v-deep .el-form-item {margin-bottom: 0 !important;
}.rulesFail {margin: 18px 0 !important;
}.rulePass {margin: 0 !important;
}
</style>