How do I make a two row layout for each item in Element UI

Question

I have a code base that uses Element UI (why does it exist?). And I need to have a double row for each item displayed. I need my layout to look like so:

R1 | col1 | col2 | col3 |
   |        col4        |
R2 | col1 | col2 | col3 |
   |        col4        |

How can I do this in Element UI when I do not see a el-table-row element in the documentation (http://element.eleme.io/#/en-US/component/table)

Also, I've seen their example using arraySpanMethod and objectSpanMethod but I do not understand how to get my desired result.

Answer 1

Here's how you can do this with span-method:

<template>
  <div id="app">
    <el-table
      :data="tableData6"
      :span-method="spanMethod"
      border
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="row" label="Row" width="180"> </el-table-column>
      <el-table-column prop="col1" label="Column 1"> </el-table-column>
      <el-table-column prop="col2" label="Column 2"> </el-table-column>
      <el-table-column prop="col3" label="Column 3"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  data: function() {
    return {
      rows: ["R1", "R2"],
      tableData6: [
        {
          row: "R1",
          col1: "col1",
          col2: "col2",
          col3: "col3"
        },
        {
          row: "R1a",
          name: "Tom",
          col1: "col4"
        },
        {
          row: "R2",
          col1: "col1",
          col2: "col2",
          col3: "col3"
        },
        {
          row: "R2a",
          col1: "col4"
        }
      ]
    };
  },
  components: {
    HelloWorld
  },
  methods: {
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return [2, 1];
        }
        return [0, 0];
      }
      if (rowIndex % 2 === 0) {
        return [1, 1];
      }
      if (columnIndex === 1) {
        return [1, 3];
      }
      return [0, 0];
    }
  }
};
</script>

https://codesandbox.io/s/6xn4y5321k

If you don't absolutely need a table for this, you can use <el-row> and <el-col>:

<template>
  <div id="app">
    <el-row v-for="row in rows" :key="row">
      <el-col :span="6">{{ row }}</el-col>
      <el-col :span="18">
        <el-row>
          <el-col :span="6"> col1 </el-col>
          <el-col :span="6"> col2 </el-col>
          <el-col :span="6"> col3 </el-col>
        </el-row>
        <el-row> <el-col :span="18"> col4 </el-col> </el-row>
      </el-col>
    </el-row>
  </div>
</template>

https://codesandbox.io/s/8287p64o29