elementui中table进行表单验证

在Element UI中，如果你想要对表格中的表单进行验证，你可以使用el-form和el-form-item组件包裹el-table，并在每一行使用el-input或其他表单元素。这样，你可以通过调用this.$refs.form.validate((valid) => {})来进行验证，其中form是你在el-form组件上设置的ref属性值。

以下是一个简单的例子：

<template>
  <el-form ref="form" :model="form" :rules="rules">
    <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="rules.name">
            <el-input v-model="scope.row.name"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <!-- 其他列 -->
    </el-table>
    <el-button type="primary" @click="validateForm">提交</el-button>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: this.tableData,
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 3, max: 5, message: '姓名长度在 3 到 5 个字符', trigger: 'blur' }
        ]
        // 其他规则
      },
      tableData: [
        { date: '2016-05-02', name: '王小虎' },
        // 其他数据
      ]
    };
  },
  methods: {
    validateForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('验证通过');
        } else {
          console.log('验证失败');
          return false;
        }
      });
    }
  }
};
</script>

在这个例子中，我们定义了一个带有验证规则的表单，并在表格的每一行使用了el-form-item来包裹输入框。prop属性是用来指定表单数据对象中的数据。在validateForm方法中，我们调用this.$refs.form.validate来进行表单验证。如果所有的表单项都验证通过，那么可以执行提交操作。