ElementUI 表格表单校验：单行校验实现方案

在 ElementUI 的表格表单中，默认的表单校验会将所有错误一次性显示出来，导致整个表单标红。以下是几种实现单行校验的方法：

方法一：使用 validateField 方法

// 在表格行内添加校验规则
<el-form-item 
  :prop="'tableData.' + scope.$index + '.name'" 
  :rules="rules.name"
>
  <el-input v-model="scope.row.name"></el-input>
</el-form-item>

// 校验方法
validateRow(index) {
  this.$refs.form.validateField(`tableData.${index}.name`, (error) => {
    if (!error) {
      // 校验通过
    }
  });
}

方法二：动态绑定 rules

// 在 data 中定义每行的校验状态
data() {
  return {
    tableData: [],
    rowRules: {} // 存储每行的校验规则
  }
}

// 动态添加校验规则
addRow() {
  const newRow = { name: '' };
  this.tableData.push(newRow);
  this.rowRules[`tableData.${this.tableData.length - 1}.name`] = [
    { required: true, message: '请输入名称', trigger: 'blur' }
  ];
}

方法三：使用单独的 form 组件包裹每行

<el-table-column>
  <template slot-scope="scope">
    <el-form :model="scope.row" :ref="'form' + scope.$index">
      <el-form-item prop="name" :rules="rules.name">
        <el-input v-model="scope.row.name"></el-input>
      </el-form-item>
    </el-form>
  </template>
</el-table-column>

// 校验单行
validateSingleRow(index) {
  this.$refs['form' + index][0].validate((valid) => {
    if (valid) {
      // 校验通过
    }
  });
}

方法四：自定义错误显示

// 使用 error 属性控制错误显示
<el-form-item 
  :error="rowErrors[scope.$index] ? rowErrors[scope.$index].name : ''"
>
  <el-input 
    v-model="scope.row.name" 
    @blur="validateName(scope.row, scope.$index)"
  ></el-input>
</el-form-item>

// 手动校验
validateName(row, index) {
  if (!row.name) {
    this.$set(this.rowErrors, index, { name: '请输入名称' });
  } else {
    this.$set(this.rowErrors, index, { name: '' });
  }
}

注意事项

1. 确保每个表单项的 prop 路径正确，如 tableData.0.name
2. 动态生成的表单需要使用动态 ref
3. 对于动态增减的表格，要注意清理旧的校验结果
4. 可以考虑使用 debounce 优化频繁触发的校验

以上方法可以根据实际项目需求选择或组合使用，实现更精细化的表格表单校验控制。