ElementUI el-form 组合el-table如何做必填校验

在Element UI中，可以通过el-form和el-table组合实现表单内表格数据的必填检查。你需要使用el-form-item包裹el-table，并在需要校验的el-table-column内部使用v-for循环渲染表单项。

以下是一个简单的例子，展示了如何在el-table中的每一行实现必填的校验：

<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-table :data="form.items" style="width: 100%;">
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column label="成绩" width="180">
        <template slot-scope="scope">
          <el-form-item :prop="'items.' + scope.$index + '.score'" :rules="[{ required: true, message: '成绩不能为空', trigger: 'blur' }]">
            <el-input v-model.number="scope.row.score"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
    </el-table>
    <el-form-item>
      <el-button type="primary" @click="submitForm('form')">提交</el-button>
    </el-form-item>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        items: [
          { date: '2016-05-02', name: '张三', score: '' },
          { date: '2016-05-04', name: '李四', score: '' }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('提交成功!');
        } else {
          console.log('表单校验失败!');
          return false;
        }
      });
    }
  }
};
</script>

在这个例子中，el-form中包含了一个el-table，el-table中的每一行都有一个el-form-item用于输入成绩，并且该el-form-item设置了必填的校验规则。当用户尝试提交表单时，会触发表单的校验方法，如果任何一个成绩项为空，则不允许提交，并在控制台输出校验失败的信息。