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

最新推荐文章于 2024-08-21 20:18:17 发布
最新推荐文章于 2024-08-21 20:18:17 发布
阅读量789 收藏 8
点赞数 5
分类专栏： vue3 vue2 文章标签： vue.js elementui 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53339757/article/details/140853554
版权
vue3 同时被 2 个专栏收录
11 篇文章 0 订阅
订阅专栏
vue2
3 篇文章 0 订阅
订阅专栏

常见需求：

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

注意事项：

1、校验里面用到了正则校验功能，大家可以参考 酱酱仔的lgb-x文档lgb-xicon-default.png?t=N7T8https://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-item
                  label=""
                  :prop="`tableData[${scope.$index}].date`"
                  :rules="{
        validator: validateDate,
        trigger: ['blur', 'change'],
        id: scope.$index,
      },"
                >
                  <el-date-picker
                    v-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-item
                  label=""
                  :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-item
                  label=""
                  :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-item
                  label=""
                  :prop="`tableData[${scope.$index}].date`"
                  :rules="{
        validator: validateDate,
        trigger: ['blur', 'change'],
        id: scope.$index,
      },"
                >
                  <el-date-picker
                    v-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-item
                  label=""
                  :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-item
                  label=""
                  :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>

效果如下所示：

爱池鱼的酱酱仔
关注
  • 5
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
element 中校验 el-table
weixin_45484574的博客
09-05 2694
需求是有一个el-table表格，el-table中有el-input, 要对el-input进行校验 解决：用el-form表单校验 html代码 html部分就是这样写，el-form表单包裹el-table <el-form-item :prop=" 'tableData.' + scope.$index +'.school " :rules="rules.school"> 好...
vue table表单校验
FY18381366936的博客
11-19 981
vue table表单校验（正则 table <el-form-item label="执行时间/次" prop="executeTime" class="execute-time"> <el-input placeholder="0.0" v-model="form.executeTime" size="small"> </el-input> <span style="c
el-table表格每一行输入框之间的数字校验比较
weixin_43550562的博客
01-31 196
【代码】el-table表格每一行输入框之间的数字校验比较。
el-table通过这样封装可以实现校验-表格校验的原理
m0_47531829的博客
02-28 1230
表单表格的封装，以及表单校验的原理
element-ui 给el-table添加校验；给表单嵌套对象添加校验
ingenuou_的博客
05-30 8187
element-ui 给el-table添加校验；给表单嵌套对象添加校验
vue的表格(el-table)的校验
weixin_43796595的博客
07-22 5175
相信如果是表单校验的话,大家一定不陌生,可以从组件中找到，但是表格校验的话组件中也没有，那么我们怎么校验表格呢？ 既然表单可以校验，那么我们就建一个表单不得了，在表单的里面嵌套表格，不就行了 <el-form ref="formA" :model="formA" :rules="Arules"> <el-table :data="formA.arrangeList" border>
Vue3 使用 el-form 嵌套 el-table 进行单条数据的表单校验
最新发布
前端学步
08-21 859
在实际开发过程中，我们经常需要处理表格中的表单数据，比如在编辑表格中的某一行数据时进行校验。本文将介绍如何在 Vue3 和 Element Plus 中实现这一功能。在这个例子中，我们使用了一个名为formObj的响应式对象来存储表格的数据。formObj包含一个名为list的数组，数组中的每个元素都代表表格中的一行。通过上述方法，我们可以实现在 Vue3 中使用 Element Plus 的组件嵌套
el-table表格可编辑加正则验证
weixin_51063441的博客
07-30 1596
记得去年写后台的时候写过类似功能，没有记笔记，今天写的时候居然不会了，好记性不如烂笔头，废话不多说 上代码 div部分代码 <el-form :model="inServForm" ref="inServForm" :rules="rules" size="medium" style="width: 100%"> <el-table :data="inServForm.abnormalData"> <e...
Vue ~ element-ui 动态表单验证，支持添加和删除操作
07-27
通过与el-form结合，可以实现表格内的动态表单验证，例如，每行表格数据都可以独立进行验证。 4. 动态添加和删除操作： 在实际应用中，往往需要支持用户在表单中动态添加或删除字段。Vue的数组操作方法（如push、...
el-table rules 正则校验写法
05-09
为了给 el-table 添加正则校验规则，需要在 el-table-column 中使用 scoped-slot 和 validator 函数。如果要对某一列添加正则校验规则，需要将 prop 设置为值所呈现的字段名。下面是一个示例代码： ```html <el-...
el-table树形表格表单验证(列表生成序号)
10-15
主要介绍了el-table树形表格表单验证(列表生成序号)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
el-table行内编辑保存时校验表单
qq_46113805的博客
08-16 1588
效果 实现： 1，表格外面包裹<el-form>标签： 2，data中定义列表数据和规则： 3，el-table-column中添加el-form-item并添加prop 4，制定校验规则，保存前进行校验 ok，点击保存时就可以实现每行的表单校验啦！ 参考：(19条消息) vue+ElementUI 表单嵌套表格逐行校验（新增、编辑）的完美解决方案_iamlujingtao的博客-CSDN博客 ...
vue2项目中对el-table表格中对输入框字段进行校验
06-13
对于 `el-table` 表格中的输入框字段进行校验，可以通过以下步骤实现： 1. 在表格中将要进行校验的字段设置为可编辑的输入框，并绑定一个 `v-model` 指令，用于实时获取输入框的值。 2. 在需要校验的时候，通过...
Vue中 对Table表格中的输入项进行校验
热门推荐
晓风揽月
12-22 1万+
项目开发中，经常会遇到在场景：对table表格的输入项字段进行校验，同时提交时整体校验，效果如图所示： Table: ！！这个校验的实现，主要思路是：1.From表单中嵌套使用table表格，用表单的校验机制实现校验； 2.ivu-form-item元素，绑定动态prop; html代码如下，本次项目里样式用了 View UI ，element其他，也同样适用这个校验方法： <template> <div class="wrapper"> <...
element el-table实现动态新增、编辑表格以及动态校验，自定义校验
qq_48763502的博客
08-08 886
在项目中遇到设置签到的情况，如图所示，在后台中需要可以设置签到任务。同时也会遇到动态校验的场景。1.有时候明明给一个变量赋了值，但是他不在页面上中显示。我们可以用this.$set添加一个响应式的变量。在 Vue.js 中，this.$set 是一个用于在响应式对象上设置属性的方法。isEditor为true的时候输入框显示，然后可以进行编辑，false的时候就显示数据。实例的数据对象或组件的响应式属性上添加新的属性，确保新添加的属性也是响应式的。在点击新增任务的时候，会给一些默认的属性，
Vue3 element-plus el-form嵌套el-table，并且进行单行校验
Hoyinhs的博客
11-01 2640
element plus 小技巧
Vue前端table表格效验
weixin_60172238的博客
07-02 367
4、效果图如下最后 感谢阅读 如果有不足之处 请指出
vue3表单嵌套表格实现增删改查，并表单校验。
ygbwan的博客
02-27 1570
【代码】vue3表单嵌套表格实现增删改查，并表单校验。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱池鱼的酱酱仔

您的鼓励是我前进的动力哦~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值