el-table表格合并某一列

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

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

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 {}
    }
相关推荐
穗余1 分钟前
Typescript let和var区别
前端·javascript·typescript
晓得迷路了6 分钟前
栗子前端技术周刊第 144 期 - Rspack 2.2、pnpm 12、Solid 2.0 RC...
前端·javascript·css
奈斯先生Vector18 分钟前
从“能调用”到“可运营”:AI Agent 进入多模型时代后的架构升级
java·javascript·数据库·人工智能·算法·架构·aigc
千里码aicood2 小时前
Django+Vue 基于XGBoost与随机森林的沿海地区台风天气大数据预警系统实现
vue.js·随机森林·django
এ慕ོ冬℘゜2 小时前
前端实战:jQuery实现动态表格渲染与状态切换功能
前端·javascript·jquery
zzzzzz3102 小时前
react-bits:把酷炫动效从“灵感截图”变成可复用的 React 组件
javascript·react.js·动效
jay神3 小时前
【计算机毕业设计】基于Flask+Vue的电影数据可视化与智能推荐系统
前端·vue.js·python·信息可视化·flask·毕业设计·课程设计
海兰10 小时前
【应用】基于 Next.js 16 + Python mplfinance的金融K线图与技术指标可视化平台(三)
javascript·python·金融
小磊哥er11 小时前
深入解构Claude Code - 第 7 篇 · 连接外面的世界
javascript·ai编程
小磊哥er12 小时前
深入解构Claude Code - 第 6 篇 · 终端里的图形界面
javascript·ai编程