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

在 'el-form' 中使用 'el-table'，可以通过以下步骤进行必填校验：

1.为 'el-form' 组件设置 'ref' 属性，以便在代码中访问该组件：

<el-form ref="myForm">
  <!-- ... -->
</el-form>

2.为 'el-table' 组件设置 'row-key' 属性，并将其绑定到 'el-form' 组件的 model 对象中：

<el-form ref="myForm" :model="form">
  <el-table :data="tableData" row-key="id">
    <!-- ... -->
  </el-table>
</el-form>

在这里，'tableData' 是 'el-table' 的数据源，'id' 是数据源中每一行的唯一标识。

3.为 'el-form' 中的每一个必填项设置 'prop' 属性，以便在校验时进行标识。同时，在每一个必填项中添加 'rules' 属性，用于设置校验规则：

<el-form ref="myForm" :model="form">
  <el-table :data="tableData" row-key="id">
    <el-table-column label="姓名" prop="name">
      <template slot-scope="scope">
        <el-form-item :prop="'name-' + scope.$index" :rules="[{ required: true, message: '姓名不能为空' }]">
          <span>{{ scope.row.name }}</span>
        </el-form-item>
      </template>
    </el-table-column>
    <!-- ... -->
  </el-table>
</el-form>

在这里，我们为每一个必填项的 'prop' 属性添加了当前行的索引值，以保证每一行都有一个独立的标识。同时，我们为每一个必填项设置了一个校验规则，要求该项必须填写。

4.在提交表单时，使用 'validate()' 方法进行校验。该方法会返回一个 Promise 对象，如果校验通过，则 resolve()，否则 reject()，并将错误信息传递给 reject() 的回调函数。

this.$refs.myForm.validate((valid) => {
  if (valid) {
    // 校验通过，执行提交操作
  } else {
    // 校验失败，提示错误信息
    this.$message.error('表单填写不完整，请检查后重新提交！');
  }
});

在这里，我们调用 'validate()' 方法，并传入一个回调函数。如果校验通过，则回调函数的参数 'valid' 为 'true'，否则为 'false'。如果校验失败，则使用 '$message' 组件提示错误信息。

通过以上步骤，可以实现对 'el-table' 中必填项的校验。