Element Form表单求嵌套表格，实现表格内容校验

效果图

代码

<template>
  <div class="app container">
    <el-form ref="dataFpormRef" :v-model="dataForm">
      <el-table :data="dataForm.list">
        <el-table-column label="参数名" prop="paramName"></el-table-column>
        <el-table-column label="参数类型" prop="paramType"></el-table-column>
        <el-table-column label="是否必填" prop="required">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.required"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="值" prop="value">
          <template slot-scope="scope">
            <el-form-item
              :prop="`list.${scope.$index}.value`"
              :rules="[
                {
                  required: true,
                  message: '请输入',
                  trigger: 'blur',
                },
              ]"
            >
              <el-input v-model="scope.row.value"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataForm: {
        list: [
          {
            paramName: "pageNum",
            paramType: "INT",
            value: "",
          },
          {
            paramName: "pageSize",
            paramType: "INT",
            value: "",
          },
        ],
      },
    };
  },
};
</script>