<template>
  <!-- <el-form
    ref="groupData"
    label-width="150px"
    class="sub-condition-form"
    :model="groupData"
    :rules="rules"
  >
    <el-table :data="formatList" style="width: 100%">
      <el-table-column prop="TableId" label="TableId" width="180">
      </el-table-column>
      <el-table-column prop="TableRowId" label="TableRowId" width="180">
      </el-table-column>
    </el-table>
  </el-form> -->
  <div>
    <table border="1">
      <thead>
        <tr>
          <th>头</th>
          <th>头</th>
          <th>头</th>
          <th>头</th>
          <th>头</th>
        </tr>
      </thead>
      <tbody>
        <form action=""> 
          <tr>
            <td>com</td>
            <td>com1</td>
            <td>com2</td>
            <td>com3</td>
            <td>com4</td>
          </tr>
        </form>
        <form action="">
          <tr>
            <td>com</td>
            <td>com1</td>
            <td>com2</td>
            <td>com3</td>
            <td>com4</td>
          </tr>
        </form>
      </tbody>
    </table>
    <div class="c_table">
      <div class="c_row">
        <form action="">
          <div class="c_cell">张三</div>
          <div class="c_cell">李四</div>
          <div class="c_cell">王五</div>
          <div class="c_cell">王五</div>
        </form>
      </div>
      <form action="">
        <div>
          <div>
            <ul>
              <li>
                <div class="c_row">
                  <div class="c_cell">
                    <div>
                      <input type="text" name="" id="" />
                    </div>
                  </div>
                  <div class="c_cell">张三</div>
                  <div class="c_cell">李四</div>
                  <div class="c_cell">王五</div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  props: ["list"],
  data() {
    return {};
  },
  computed: {
    formatList() {
      let list = JSON.parse(JSON.stringify(this.list));
      let newList = [];
      list.forEach((item, index) => {
        item.forEach((ite, i) => {
          ite.TableId = index + 1;
          ite.TableRowId = i + 1;
        });
        newList.push(...item);
      });
      console.log("newList", newList);
      return newList;
    }
  }
};
</script>

<style lang="less" scoped>
.c_table {
  display: table;
  border: 1px solid #cccccc;
  margin: 5px;
  /*display: table时padding会失效*/
}

.c_row {
  display: table-row;
  border: 1px solid #cccccc;
  /*display: table-row时margin、padding同时失效*/
}

.c_cell {
  display: table-cell;
  border: 1px solid #cccccc;
  padding: 5px;
  /*display: table-cell时margin会失效*/
}
</style>