问题描述：

一个分类下有多个规则，每个规则的类型分别为1，2，3

{
	"id": 1,    //分组id
	"groupName": "分组一",    //分组名称
	"rules": [{
		"type": 1,    //规则类型
		"name": "规则一",    //规则名称
		"groupId": 1    //关联得分组id
	}, {
		"type": 2,
		"name": "规则二",
		"groupId": 1
	}]
}

实现代码：

<template>
  <div>
    <el-table
      :data="tableData"
      :cell-style="{ 'text-align': 'center' }"
      :header-cell-style="{ 'text-align': 'center' }"
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table
            :cell-style="{ 'text-align': 'center' }"
            :header-cell-style="{ 'text-align': 'center' }"
            :data="props.row.rules"
            style="width: 100%">
            <el-table-column
              prop="id"
              label="规则id">
            </el-table-column>
            <el-table-column label="规则类型">
              <template slot-scope="scope">{{ scope.row.type | setType }}</template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="规则名称">
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column
        prop="id"
        label="分组id">
      </el-table-column>
      <el-table-column
        prop="groupName"
        label="分组名称">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="add(scope.row)">添加</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加 分类规则 -->
    <el-dialog title="添加" :visible.sync="visible" width="600px">
      <el-form label-width="130px">
        <el-form-item label="分组名称">
          <el-input v-model="addRow.groupName" disabled></el-input>
        </el-form-item>
        <el-form-item label="分组类型">
          <el-checkbox-group v-model="selectedTypes" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="(item,index) in types" :disabled="item.disable" :value="item.type" :label="item.type">
              {{item.label}}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>

      <template v-for="(item,index) in addRow.rules">
        <el-form ref="form" :rules="rules" :model="addRow.rules[index]">
          <el-row :gutter="20" type="flex" align="middle" justify="center" style="margin-bottom: 12px" v-if="index==0">
            <el-col :span="10">规则类型</el-col>
            <el-col :span="10">规则名称</el-col>
          </el-row>
          <el-row :gutter="20" type="flex" align="middle" justify="center">
            <el-col :span="10">
              {{ item.type | setType }}
            </el-col>
            <el-col :span="10">
              <el-form-item prop="name">
                <el-input style="width: 200px" placeholder="请输入规则名称" v-model="item.name"
                          :disabled="!!item.id"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submit">确定</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script>
let that;
export default {
  name: "test",
  data() {
    return {
      rules: {
        name: [
          {required: true, message: '请输入规则名称', trigger: 'blur'},
        ]
      },
      //列表数据
      tableData: [{
        id: 1,
        groupName: '分组一',
        rules: [
          {
            id: 1,
            type: 1,
            name: "规则一",
            groupId: 1
          },
          {
            id: 2,
            type: 2,
            name: "规则二",
            groupId: 1
          }
        ]
      }, {
        id: 2,
        groupName: '分组二',
        rules: [
          {
            id: 3,
            type: 1,
            name: "规则一",
            groupId: 2
          },
        ]
      }],
      //规则分类
      types: '',
      //选中的规则分类
      selectedTypes: [],
      //点击添加的行
      addRow: {},
      //是否显示添加弹窗
      visible: false
    }
  },
  created() {
    that = this;
    this.init();
  },
  filters: {
    setType(type) {
      for (let item of that.types) {
        if (item.type == type) {
          return item.label;
        }
      }
    }
  },
  methods: {
    getFormPromise(form) {
      console.log("getFormPromise", form)
      return new Promise(resolve => {
        form.validate(res => {
          resolve(res)
        })
      })
    },
    //确认添加
    submit() {
      const form = this.$refs.form // 用户信息
      console.log(form)
      console.log("提交数据", JSON.stringify(this.addRow.rules));
      Promise.all(
        form.map(this.getFormPromise)
      ).then(res => {
        const validateResult = res.every(item => !!item)
        if (validateResult) {
          console.log('表单都校验通过')
        } else {
          this.$message({
            message: `填写有误，请检查`,
            type: 'warning'
          })
        }
      })
    },
    //初始化
    init() {
      this.types = [
        {
          label: "类型一",
          type: 1
        },
        {
          label: "类型二",
          type: 2
        },
        {
          label: "类型三",
          type: 3
        }
      ];
    },
    handleCheckedCitiesChange(e) {
      let list = [];
      let rules = this.addRow.rules;
      for (let type of e) {
        let item;
        for (let value of rules) {
          if (value.type == type) {//存在
            item = value
          }
        }
        if (item) {
          list.push(item)
        } else {
          list.push({
            id: '',
            type: type,
            name: "",
            groupId: this.addRow.id
          })
        }
      }
      this.addRow.rules = list;
    },
    //添加按钮
    add(row) {
      console.log("add", row)
      let addRow = JSON.parse(JSON.stringify(row));
      this.addRow = addRow;
      //初始化
      this.init();
      this.selectedTypes = [];

      let selectedTypes = [];
      for (let item of addRow.rules) {
        selectedTypes.push(item.type);
        for (let type of this.types) {
          if (item.type == type.type) {
            type.disable = true;//历史添加过的不能修改
          }
        }
      }

      this.selectedTypes = selectedTypes;
      this.visible = true;
    },
  }
}
</script>