element-plus 表格跨行与跨列

<script setup>
const objectSpanMethod = ({row, column, rowIndex, columnIndex}) => {
  if (columnIndex === 0) {
    if (rowIndex % 2 === 0) {
      return {
        rowspan: 2,
        colspan: 1,
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      }
    }
  }

  // 0-2 开始跨列， 横跨两列，会占用 0-3 的格子
  if (rowIndex === 0 && columnIndex === 2) {
    return {rowspan: 1, colspan: 2}
  }
  // 0-3 需要消失
  if (rowIndex === 0 && columnIndex === 3) {
    return {rowspan: 0, colspan: 0}
  }

  // 2-2 开始跨行， 横跨两行，会占用 3-2 的格子
  if (rowIndex === 2 && columnIndex === 2) {
    return {rowspan: 2, colspan: 1}
  }

  //  3-2 需要消失
  if (rowIndex === 3 && columnIndex === 2) {
    return {rowspan: 2, colspan: 2}
  }

  // 3-3 跨一行一列，需要占用 3-4、4-3、4-4
  if (rowIndex === 3 && columnIndex === 3) {
    return {rowspan: 2, colspan: 2}
  }
  if (rowIndex === 3 && columnIndex === 4) {
    return {rowspan: 0, colspan: 0}
  }
  if (rowIndex === 4 && columnIndex === 3) {
    return {rowspan: 0, colspan: 0}
  }
  if (rowIndex === 4 && columnIndex === 4) {
    return {rowspan: 0, colspan: 0}
  }
}

const tableData = [
  {
    id: '0-0',
    name: '0-1',
    amount1: '0-2',
    amount2: '0-3',
    amount3: '0-4',
  },
  {
    id: '1-0',
    name: '1-1',
    amount1: '1-2',
    amount2: '1-3',
    amount3: '1-4',
  },
  {
    id: '2-0',
    name: '2-1',
    amount1: '2-2',
    amount2: '2-3',
    amount3: '2-4',
  },
  {
    id: '3-0',
    name: '3-1',
    amount1: '3-2',
    amount2: '3-3',
    amount3: '3-4',
  },
  {
    id: '4-0',
    name: '4-1',
    amount1: '4-2',
    amount2: '4-3',
    amount3: '4-4',
  },
  {
    id: '5-0',
    name: '5-1',
    amount1: '5-2',
    amount2: '5-3',
    amount3: '5-4',
  },
]
</script>

<template>
  <div>实训模式</div>

  <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px"
  >
    <el-table-column prop="id" label="ID" width="180"/>
    <el-table-column prop="name" label="Name"/>
    <el-table-column prop="amount1" label="Amount 1"/>
    <el-table-column prop="amount2" label="Amount 2"/>
    <el-table-column prop="amount3" label="Amount 3"/>
  </el-table>
</template>

<style scoped>

</style>