el-table中添加一行进行表单的验证

在表格中进行表单校验
摘要由CSDN通过智能技术生成

遇到一个需求,在el-table表格中增加表格,并插入输入框,输入相对应的值点击保存增加一行表格数据,需要对表格中的输入框进行校验,以及保存。

效果如下:

 具体思路:

1.点击保存时的按钮是针对每一行的表单,所以el-form的ref设置为动态的值,每次校验值校验当前行的效果

代码如下:

<template>
  <el-table :data="dataSource">
    <el-table-column label="#" type="index"></el-table-column>
    <el-table-column label="KEY">
      <template #default="{row, $index}">
        <div v-if="flag[$index]">
          <el-form
            :ref="`ruleform_${$index}`"
            :model="ruleform"
            :rules="rule[$index]"
          >
            <el-form-item prop="key_value">
              <el-input
                v-model="ruleform.key_value"
                placeholder="请输入内容"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div v-else>
          {
  { row.key }}
        </div>
        <div class="_key" v-if="iskey[$index]">
          请输入key值
      
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值