ElementUI 表格表单嵌套校验：实现局部校验方案

在 ElementUI 中实现表格内表单的局部校验（只对特定单元格标红而非整行或整个表格）需要一些技巧。以下是几种实现方案：

方案一：使用自定义校验规则和样式覆盖

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名">
    <template slot-scope="scope">
      <el-form-item 
        :prop="'tableData.' + scope.$index + '.name'" 
        :rules="nameRules"
        :class="{'is-error': scope.row.nameError}">
        <el-input v-model="scope.row.name" @blur="validateName(scope.row)"></el-input>
      </el-form-item>
    </template>
  </el-table-column>
</el-table>

<script>
export default {
  data() {
    return {
      tableData: [{ name: '', nameError: false }],
      nameRules: [
        { required: true, message: '请输入姓名', trigger: 'blur' }
      ]
    }
  },
  methods: {
    validateName(row) {
      this.$refs.form.validateField(`tableData.${this.tableData.indexOf(row)}.name`, (error) => {
        row.nameError = !!error
      })
    }
  }
}
</script>

<style>
/* 覆盖默认样式，只对单元格标红 */
.el-table .cell .el-form-item.is-error .el-input__inner {
  border-color: #f56c6c;
}
.el-table .cell .el-form-item__error {
  position: static;
  padding-top: 0;
}
</style>

方案二：使用独立的表单校验

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

<script>
export default {
  data() {
    return {
      tableData: [{ name: '' }],
      nameRules: [
        { required: true, message: '请输入姓名', trigger: 'blur' }
      ]
    }
  },
  methods: {
    validateRow(index) {
      this.$refs['form' + index][0].validate((valid) => {
        // 处理校验结果
      })
    }
  }
}
</script>

方案三：使用自定义校验提示

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名">
    <template slot-scope="scope">
      <el-input 
        v-model="scope.row.name" 
        :class="{'error-input': scope.row.nameError}"
        @blur="validateName(scope.row)">
      </el-input>
      <div v-if="scope.row.nameError" class="error-message">请输入姓名</div>
    </template>
  </el-table-column>
</el-table>

<script>
export default {
  data() {
    return {
      tableData: [{ name: '', nameError: false }]
    }
  },
  methods: {
    validateName(row) {
      row.nameError = !row.name
    }
  }
}
</script>

<style>
.error-input .el-input__inner {
  border-color: #f56c6c;
}
.error-message {
  color: #f56c6c;
  font-size: 12px;
  line-height: 1;
  padding-top: 4px;
}
</style>

关键点总结

1. 局部校验核心：避免使用表格级的表单校验，而是针对每个单元格或行进行独立校验
2. 样式覆盖：通过自定义CSS覆盖ElementUI默认的校验样式，实现只对特定单元格标红
3. 动态错误状态：通过数据绑定控制错误状态的显示，而非依赖表单的自动校验
4. 性能考虑：对于大型表格，避免过多的响应式数据和监听器

选择哪种方案取决于你的具体需求，方案一和方案二更适合需要与ElementUI表单校验深度集成的场景，而方案三则提供了最大的灵活性但需要手动实现更多功能。