ElementUI el-table动态增减行，通过el-from实现el-table行内输入验证

在Element UI中，可以使用el-table组件来显示数据，并使用el-form组件来实现行内输入的验证。以下是一个简单的例子，展示了如何动态增加和减少表格行，并对每行进行输入验证：

<template>
  <el-form ref="tableForm" :model="form" label-width="120px">
    <el-button @click="addRow">添加行</el-button>
    <el-table :data="form.items" border style="width: 100%;">
      <el-table-column prop="name" label="名称" width="180">
        <template slot-scope="scope">
          <el-form-item :prop="'items.' + scope.$index + '.name'" :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]">
            <el-input v-model="scope.row.name"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="50">
        <template slot-scope="scope">
          <el-button @click="removeRow(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        items: [
          { name: '' } // 初始行
        ]
      }
    };
  },
  methods: {
    addRow() {
      this.form.items.push({ name: '' });
    },
    removeRow(index) {
      this.form.items.splice(index, 1);
    },
    submitForm() {
      this.$refs.tableForm.validate((valid) => {
        if (valid) {
          alert('提交成功!');
        } else {
          alert('表单验证失败!');
          return false;
        }
      });
    }
  }
};
</script>

在这个例子中，form 对象包含一个 items 数组，每个数组项代表表格中的一行。el-table 通过 :data="form.items" 绑定这个数组来显示表格行。每个单元格中的 el-form-item 通过 v-model 绑定当前行的数据，并通过 :prop 属性指定验证的字段路径。el-form-item 的 :rules 属性定义了验证规则。

addRow 方法用来添加新的空白行到表格中，removeRow 方法则用来删除指定索引的行。submitForm 方法通过调用 this.$refs.tableForm.validate 来触发表单的验证，如果验证通过则提交表单，否则显示错误信息。