效果如下：

image.png

思路

1. 定义数据类型

  data() {
    return {
      // 用于校验表格的form
      tableForm: {
        items: []
      },
      //字段表格数据
      modelFieldList: [],
      // 表单校验
      rules: {
        mid: [
          { required: true, message: "模型ID不能为空", trigger: "change" }
        ],
        dataAttr: [
          { required: true, message: "数据属性不能为空", trigger: "change" }
        ],
        showName: [
          { required: true, message: "显示名称不能为空", trigger: "blur" }
        ],
        fieldType: [
          { required: true, message: "数据类型不能为空", trigger: "change" }
        ],
        enabled: [
          { required: true, message: "启用不能为空", trigger: "blur" }
        ],
        defaults: [
          { required: true, message: "默认值不能为空", trigger: "blur" }
        ],
        uniqueKey: [
          { required: true, message: "唯一键不能为空", trigger: "blur" }
        ],
        filtered: [
          { required: true, message: "筛选不能为空", trigger: "blur" }
        ],
      }
    };
  },

2. 在 table 的外层加一个 form 表单，定义 ref 和 model 属性,再 el-table-column 里面加上 el-form-item 标签，
   重点就是指定 prop 属性，还有 rules 属性。
   prop / rules 属性示例:

          <el-form-item :prop="'items.' + scope.$index + '.dataAttr'" :rules="rules.dataAttr" :inline-message="true">
              <el-select v-model="scope.row.dataAttr" placeholder="请选择数据属性" style="width: 120px;">
                <el-option v-for="dict in dict.type.warn_data_attr" :key="dict.value" :label="dict.label"     :value="dict.value"></el-option>
              </el-select>
            </el-form-item>

 <el-form ref="tableForm" :model="tableForm">

      <el-table v-loading="loading" :data="modelFieldList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="主键ID" align="center" prop="id" v-if="true" />
        <el-table-column label="模型ID" align="center" prop="mid" v-if="false" />
        <el-table-column label="数据属性" align="center" width="140px" prop="dataAttr">
          <template slot-scope="scope">
            <el-form-item :prop="'items.' + scope.$index + '.dataAttr'" :rules="rules.dataAttr" :inline-message="true">
              <el-select v-model="scope.row.dataAttr" placeholder="请选择数据属性" style="width: 120px;">
                <el-option v-for="dict in dict.type.warn_data_attr" :key="dict.value" :label="dict.label"     :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="显示名称" width="140px" align="center" prop="showName">
          <template slot-scope="scope">
            <el-form-item class="table_item" :inline-message="true" :rules="rules.showName"  :prop="'items.' + scope.$index + '.showName'">
              <el-input style="width:120px" v-model="scope.row.showName" placeholder="请输入内容"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="数据类型" width="140px" align="center" prop="fieldType">
          <template slot-scope="scope">
            <el-form-item :prop="'items.' + scope.$index + '.fieldType'" :rules="rules.fieldType" :inline-message="true">
              <el-select v-model="scope.row.fieldType" placeholder="请选择数据类型">
                <el-option v-for="dict in dict.type.dc_datatype" :key="dict.value" :label="dict.label"
                  :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="启用" align="center" prop="enabled">
          <template slot-scope="scope">
            <el-form-item class="table_item" :inline-message="true" :rules="rules.enabled"
              :prop="'items.' + scope.$index + '.enabled'">
              <el-checkbox v-model="scope.row.enabled"></el-checkbox>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="唯一键" align="center" prop="uniqueKey">
          <template slot-scope="scope">
            <el-form-item class="table_item" :inline-message="true" :rules="rules.uniqueKey"
              :prop="'items.' + scope.$index + '.uniqueKey'">
              <el-checkbox v-model="scope.row.uniqueKey"></el-checkbox>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="筛选" align="center" prop="filtered">
          <template slot-scope="scope">
            <el-form-item class="table_item" :inline-message="true" :rules="rules.filtered"
              :prop="'items.' + scope.$index + '.filtered'">
              <el-checkbox v-model="scope.row.filtered"></el-checkbox>
            </el-form-item>
          </template>
        </el-table-column> 
      </el-table>
 
    </el-form>

3. 校验form 表单
   校验form 表单之前，一定要保证 tableForm.items 的数据和 modelFieldList 是一至的，也就是说，在获取 到modelFieldList 的时候，需要把同样的数据，赋值到 tableForm.items 中

    /** 获取字段列表 */
    getList() {
      this.loading = true;
      listModelField(this.queryParams).then(response => {
        this.modelFieldList = response.rows;
        this.tableForm.items = response.rows;  // 用于校验
        this.total = response.total;
        this.loading = false;
      });
    },
/*
  添加新对象
*/
addField(){
      const item = {
        mid: 0,
        orderid: 100,
        enabled: true,
        uniqueKey: false,
        filtered: false
      }
      this.modelFieldList.push(item)
      this.tableForm.items.push(item) // 用于校验
}
,
    /** 保存对象 */
    handleUpdate(row) {
      # 进行表单校验
      this.$refs.tableForm.validate(valid => {
        
        if (valid) {
            saveEntities()
 
        }
      })
    },