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 {}
    }
相关推荐
gnip7 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
掘金安东尼9 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手13 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
Hilaku13 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
LuckySusu13 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu13 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu13 小时前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu13 小时前
【js篇】call() 与 apply()深度对比
前端·javascript
LuckySusu13 小时前
【js篇】addEventListener()方法的参数和使用
前端·javascript
LuckySusu13 小时前
【js篇】深入理解 JavaScript 原型与原型链
前端·javascript