element ui table 中如何实现这种布局？

Question

如何实现这种布局的，数据结构是怎样的。

Answer 1

使用table嵌套实现么，外边整体一个大的table，右边拆分成几个小的table，然后修改css样式

先上效果图，比较毛躁

主要说下思路吧，首先外边是分左右布局，删除和担保类型作为左边表格，右边表格以表格堆积而成。

HTML部分

<div class="table-box">
      <el-table :data="tableData" size="mini" class="left-table" border>
        <el-table-column label="删除" align="center" min-width="80">
          <template>
            <i class="el-icon-remove-outline"></i>
          </template>
        </el-table-column>
        <el-table-column label="担保类型" prop="type" align="center" min-width="120"></el-table-column>
      </el-table>
      <div class="right-table">
        <el-table size="mini" border :data="tableData1">
          <el-table-column label="企业名称" prop="company" align="center" min-width="220">
            <template slot-scope="scope">
              <el-input v-model="scope.row.company" size="small"></el-input>
            </template>
          </el-table-column>
          
          <el-table-column label="统一社会信用代码" prop="code" align="center" min-width="220">
            <template slot-scope="scope">
              <el-input v-model="scope.row.code" size="small"></el-input>
            </template>
          </el-table-column>
        </el-table>
        <div class="perpon-table">
          <el-table :data="tableData2" size="mini" border>
              <el-table-column label="法定代表人" prop="person" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.person" size="small"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="注册资本" prop="register" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.register" size="small"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="实缴资本" prop="real" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.real" size="small"></el-input>
                </template>
              </el-table-column>
          </el-table>
          <el-table size="mini" border :data="tableData3" >
            <el-table-column label="成立日期" prop="date" align="center" >
              <template slot-scope="scope">
                <p style="line-height:32px">{{scope.row.date}}</p>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-table size="mini" border :data="tableData4">
          <el-table-column label="注册地址" prop="address" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.address" size="small"></el-input>
            </template>
          </el-table-column>
        </el-table>
        <el-table size="mini" border :data="tableData5">
          <el-table-column label="经营地址" prop="address" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.address" size="small"></el-input>
            </template>
          </el-table-column>
        </el-table>
        <el-table size="mini" border :data="tableData6">
          <el-table-column label="邮递地址" prop="address" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.address" size="small"></el-input>
            </template>
          </el-table-column>
        </el-table>
        <el-table :data="tableData7" size="mini" border>
              <el-table-column label="联系人" prop="contract" align="center" min-width="100">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.contract" size="small"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="联系电话" prop="tel" align="center" min-width="120">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.tel" size="small"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="电子邮箱" prop="email" align="center" min-width="200">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.email" size="small"></el-input>
                </template>
              </el-table-column>
          </el-table>
      </div>
    </div>

js部分

data() {
    return {
      tableData: [
        {
          type: "企业担保",
        }
      ],
      tableData1: [
        {
          company: "111",
          code: "123"
        }
      ],
      tableData2: [
        {
          person: "111",
          register: "222",
          real: "333",
        }
      ],
      tableData3: [{date: "2020-01-02"}],
      tableData4: [{address: "陕西省"}],
      tableData5: [{address: "陕西省西安市"}],
      tableData6: [{address: "陕西省西安市高新区"}],
      tableData7: [
        {
          contract: "",
          tel: "",
          email: ""
        }
      ]
    };
  },

css部分

.table-box{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  .left-table{
    width: 20%;
    /deep/ .el-table__body {
      height: 456px !important;
    }
  }
  .right-table{
    flex:1;
  }
}
.perpon-table{
  display: flex;
  justify-content: center;

}

代码中命名都不规范，只是临时写的一个demo,使用时需要重新设置，还有右边部分表格border有叠加部分，相当于2px，需要优化等等。

如果后续有什么其他更好的方法记得@我下，我也学习下。

Answer 2

我觉的你这个表格不需要用element table，这种的直接使用table tr td然后调整css样式这样更简单，这个用element table会更复杂。