博客

Vue和elementui合并单元格问题

表格样式：

<template>
  <el-table
      :key="randomKey"
      :data="tableData"
      :render-header="renderHeader"
      :span-method="objectSpanMethod"
      border
      class="gl-table"
      stripe
      style="width: 100%;">
    <el-table-column
        align="center"
        fixed
        label="名称"
        min-width="120"
        prop="name">
    </el-table-column>
    <el-table-column
        align="center"
        label="分类"
        prop="category">
    </el-table-column>
    <el-table-column
        align="center"
        label="产量">
      <el-table-column
          align="center"
          label="计划"
          min-width="60"
          prop="type">
      </el-table-column>
      <el-table-column
          align="center"
          disabled="true"
          label="日产"
          min-width="60">
      </el-table-column>
    </el-table-column>
    <el-table-column
        align="center"
        label="主要技术"
        show-overflow-tooltip>
      <el-table-column
          :label="'利用系数'"
          align="center"
          min-width="100"
          prop="cokeBunker1" />
      <el-table-column
          align="center"
          label="焦比"
          min-width="70"
          prop="cokeBunker2" />
      <el-table-column
          align="center"
          label="煤比"
          min-width="70"
          prop="cokeBunker3" />
      <el-table-column
          align="center"
          label="焦"
          min-width="80"
          prop="cokeBunker4" />
    </el-table-column>
  </el-table>
</template>

方法实现：只合并第一列的内容

用rowIndex, columnIndex 找到要合并的开始单元格

return {rowspan: 1,colspan: 1 } 表示表格不变

return {rowspan: 2,colspan: 1 } 表示表格向下合并一个单元格

return {rowspan: 1,colspan: 2 } 表示表格向右合并一个单元格

return {rowspan: 0,colspan: 0 } 表示删除此单元格

 objectSpanMethod({rowIndex, columnIndex}) { // 合并单元格
      if (columnIndex === 0) { //只合并第一列
        return this.mergeCol('name', rowIndex)
      }
    },
    mergeCol(id, rowIndex) { // 合并单元格 id：属性名 rowIndex：行索引值
      let idName = this.tableData[rowIndex][id] // 获取当前单元格的值
      if (rowIndex > 0) { // 判断如果不是第一行
        if (this.tableData[rowIndex][id] != this.tableData[rowIndex - 1][id]) { // 先判断当前单元格的值是不是和上一行的值相等
          var i = rowIndex; var num = 0 // 定义一个变量i，用于记录行索引值并进行循环，num用于计数
          while (i < this.tableData.length) { // 当索引值小于table的数组长度时，循环执行
            if (this.tableData[i][id] === idName) { // 判断循环的单元格的值是不是和当前行的值相等
              i++ // 如果相等，则索引值加1
              num++ // 合并的num计数加1
            } else {
              i = this.tableData.length // 如果不相等，将索引值设置为table的数组长度，跳出循环
            }
          }
          return {
            rowspan: num, // 最终将合并的行数返回
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      } else {
        let i = rowIndex
        let num = 0
        while (i < this.tableData.length) {
          if (this.tableData[i][id] === idName) {
            i++
            num++
          } else {
            i = this.tableData.length
          }
        }
        return {
          rowspan: num,
          colspan: 1
        }
      }
    },

数据模拟：

dailyReports1: [
        {name: '1#', category: '当日', type: '1', company: '1', tFe: '1'},
        {name: '1#', category: '总计', type: '1', company: '1', tFe: '1'},
        {name: '2#', category: 'w', type: '3', company: '3a', tFe: 'e'},
        {name: '2#', category: 'w', type: '3', company: '3a', tFe: 'e'},
      ],

效果展示：