element plus table的使用

 记录一个table的大部分使用方法。

<template>
  <div>
    <el-table :show-header="false" :data="tableData1" border style="width: 100%">
      <el-table-column prop="name1" width="300" align="center" />
      <el-table-column prop="amount1" align="center" />
    </el-table>

    <el-table :data="tableData" :header-cell-style="bg" :span-method="objectSpanMethod">
      <el-table-column label="综合能源消费量(吨标准煤)" align="center">
        <el-table-column prop="equivalentValueAnnual" label="当量值" width="150" align="center" />
        <el-table-column prop="equivalentValueMonthly" label="等价值" width="150" align="center" />
      </el-table-column>

      <el-table-column label="1-12月综合能源消费量(吨标准煤)" align="center">
        <el-table-column prop="equivalentValueAnnual" label="当量值" width="150" align="center" />
        <el-table-column prop="equivalentValueMonthly" label="等价值" width="150" align="center" />
      </el-table-column>

      <el-table-column label="月度综合能源消费量(吨标准煤)" align="center">
        <el-table-column prop="month" label="月份" align="center" />
        <el-table-column prop="equivalentValueMonthlyTon" label="当量值" align="center" />
        <el-table-column prop="equivalentValueMonthlyUnit" label="等价值" align="center" />
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
const bg = {
  'background-color': '#fff'
}

const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  console.log('========数据1===========')
  console.log(row, column, rowIndex, columnIndex)
  console.log('========数据2===========')

  if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex === 3) {
    if (rowIndex === 0) {
      return {
        rowspan: tableData.length, // 合并所有行
        colspan: 1
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0
      }
    }
  }
}

const tableData1 = [
  { name1: '统计年份', amount1: '2024-04-01' },
  { name1: '能源类别', amount1: '水，电，天然气' }
]

const tableData = [
  {
    statisticalYear: '2024年',
    energyCategory: '电、水、天然气、高煤煤气、氮气、柴油',
    equivalentValueAnnual: '3752.43',
    equivalentValueMonthly: '8588.98',
    month: '1月',
    equivalentValueMonthlyTon: '88.981',
    equivalentValueMonthlyUnit: '52.431'
  },
  {
    month: '2月',
    equivalentValueMonthlyTon: '88.982',
    equivalentValueMonthlyUnit: '52.432'
  },
  { month: '3月', equivalentValueMonthlyTon: '88.983', equivalentValueMonthlyUnit: '52.433' },
  { month: '4月', equivalentValueMonthlyTon: '88.984', equivalentValueMonthlyUnit: '52.434' },
  { month: '5月', equivalentValueMonthlyTon: '88.985', equivalentValueMonthlyUnit: '52.435' },
  { month: '6月', equivalentValueMonthlyTon: '88.986', equivalentValueMonthlyUnit: '52.436' },
  { month: '7月', equivalentValueMonthlyTon: '88.987', equivalentValueMonthlyUnit: '52.437' },
  { month: '8月', equivalentValueMonthlyTon: '88.988', equivalentValueMonthlyUnit: '52.438' },
  { month: '9月', equivalentValueMonthlyTon: '88.989', equivalentValueMonthlyUnit: '52.439' },
  { month: '10月', equivalentValueMonthlyTon: '88.98910', equivalentValueMonthlyUnit: '52.43910' },
  { month: '11月', equivalentValueMonthlyTon: '88.98911', equivalentValueMonthlyUnit: '52.43911' },
  { month: '12月', equivalentValueMonthlyTon: '88.9812', equivalentValueMonthlyUnit: '52.4312' }
]
</script>

<style scoped>
/* 可根据需要添加样式 */

/* 最外层透明 */
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background-color: transparent;
}

/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: #fff;
}
</style>

 例如：合并第三列的第五行、第六行和第七行，那么就是

if (columnIndex === 2) {
    if (rowIndex === 4) {
      return {
        rowspan: 3, // 合并三行
        colspan: 1
      }
    } else if (rowIndex === 5 || rowIndex === 6) {
      return {
        rowspan: 0,
        colspan: 0
      }
    }
  }

例如：合并第三行的，4,5,6列

// 合并第三行的第4列、第5列和第6列
  if (rowIndex === 2) {
    if (columnIndex === 3 || columnIndex === 4 || columnIndex === 5) {
      if (columnIndex === 3) {
        return {
          rowspan: 1, // 合并一行
          colspan: 3 // 合并三列
        }
      } else {
        return {
          rowspan: 0,
          colspan: 0
        }
      }
    }
  }

大概都是这个这么玩法。