elment-ui表格table中input校验

Element UI 的表格 (`el-table`) 中的输入校验通常是在配合 `el-form` 或 `el-input` 组件一起使用的。当在表格单元格内添加了 `el-input` 并需要验证用户输入时，你可以这样做：

1. 首先，在 `<el-form>` 组件里定义表单字段，并绑定到每个单元格的值上。例如，假设你有一个名为 `form` 的 Form 实例：

<template>
  <el-form ref="form" :model="formData">
    <el-table :data="tableData">
      <!-- ... -->
      <el-table-column
        prop="columnToValidate"
        label="验证列"
        align="center"
        scoped-slot="scope.row">
        <el-input v-model="scope.row.columnToValidate" placeholder="请输入内容"></el-input>
      </el-table-column>
      <!-- ... -->
    </el-table>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: { // 这里存放表单数据，包括需要校验的字段
        columnToValidate: ''
      },
      tableData: [] // 表格数据
    };
  }
};
</script>

2. 然后，在表单的 `watch` 或者自定义事件处理器里添加输入校验规则。比如使用 Vue 的 `watch` 函数来监听字段变化并检查是否满足条件：

<script>
//...
methods: {
  handleValidation(value) {
    if (!value || value.length < 3) {
      this.$refs.form.validateField('columnToValidate', { valid: false });
    } else {
      this.$refs.form.validateField('columnToValidate', { valid: true });
    }
  }
},
watch: {
  'formData.columnToValidate': {
    immediate: true,
    handler(newValue) {
      this.handleValidation(newValue);
    }
  }
}
//...
</script>

在这个例子中，如果 `columnToValidate` 的长度小于 3，`validateField` 方法会将该字段标记为无效。