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

遇到一个需求,在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值