【elementui笔记：el-table表格的输入校验】

在Element UI中，可以使用el-form和el-table-column组件来实现对el-table中输入数据的验证。以下是一个简单的例子，展示了如何对el-table中的输入进行验证：

<template>
  <el-form :model="tableData" ref="tableForm">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
        <template slot-scope="scope">
          <el-form-item :prop="'[' + scope.$index + '].name'" :rules="[{ required: true, message: '姓名不能为空' }]">
            <el-input v-model="scope.row.name"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <!-- 其他列 -->
    </el-table>
    <el-button type="primary" @click="validateTable">提交</el-button>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: '王小虎' },
        { date: '2016-05-04', name: '' },
        // 其他数据...
      ],
    };
  },
  methods: {
    validateTable() {
      this.$refs.tableForm.validate((valid) => {
        if (valid) {
          alert('验证通过');
        } else {
          alert('验证失败');
          return false;
        }
      });
    },
  },
};
</script>

在这个例子中，我们使用了el-form来包裹整个el-table，并且在el-table-column中使用了template插槽来定义每个单元格的内容。在这个插槽内部，我们使用了el-form-item来代替原来的el-input，并通过:prop属性来指定每个表单项的数据路径，这样就可以实现表格行的数据验证。

当你点击提交按钮时，会触发validateTable方法，该方法通过调用this.$refs.tableForm.validate来进行表单验证。如果所有的表单项都通过验证，那么会弹出“验证通过”的提示；如果任何一项未通过验证，则会弹出“验证失败”的提示，并且不会继续执行提交操作。