el-table表格合并某一列

dy17172025-01-08 21:56

需求：按照下图完成单元格合并，数据展示

可以看到科室列是需要合并的并加背景色展示；具体代码如下：

html 复制代码

<el-table
        ref="tableA"
        :data="tableDataList"
        :header-cell-style="{ backgroundColor: '#f2dcdb', color: '#333', fontSize: '14px', fontWeight: '600', height: '30px' }"
        style="width: 100%; margin: 0 auto"
        height="100%"
        align="center"
        row-key="id"
        stripe
        border
        :span-method="spanMethod"
        :cell-style="modelCdCellStyle"
      >
        <template v-for="(item) in viewColumns">
          <el-table-column
            :key="item.prop"
            :fixed="item.fixed"
            :prop="item.prop"
            :align="item.align"
            :label="item.label"
            :min-width="item.width"
            :show-overflow-tooltip="true"
          />
        </template>
      </el-table>

      viewColumns: [
        { prop: 'system', width: '100', align: 'center', label: '科室', fixed: false },
        { prop: 'systemCode', width: '120', align: 'center', label: '系', fixed: false },
        { prop: 'lastCount', width: '120', align: 'center', label: '上月累计', fixed: false },
        { prop: 'addCount', width: '90', align: 'center', label: '新增', fixed: false },
        { prop: 'modCount', width: '120', align: 'center', label: '修改', fixed: false },
        { prop: 'newCount', width: '120', align: 'center', label: '当月累计', fixed: false }
      ],

javascript 复制代码

    // 合并
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) { // 针对第一列
        if (rowIndex === 0) {
          return {
            rowspan: this.tableDataList.length, // 合并从第一行到最后一行
            colspan: 1
          }
        } else {
          return {
            rowspan: 0, // 后续行不显示内容
            colspan: 0
          }
        }
      }
      return { rowspan: 1, colspan: 1 } // 其他列不合并
    },
//设置颜色的
    modelCdCellStyle({ row, column, rowIndex, columnIndex }) {
      const lastRowIndex = this.tableDataList.length - 1
      if (rowIndex === 0 && column.property == 'system') {
        return { backgroundColor: '#c6d9f1', color: '#333', fontSize: '16px', fontWeight: '600' } 
      } else if (rowIndex === lastRowIndex) {
        return { backgroundColor: '#c6d9f1', color: '#333', fontSize: '16px', fontWeight: '600' } 
      }
      return {}
    }