当前位置: 首页 > article >正文

el-table表格合并某一列

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

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

<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 }
      ],
    // 合并
    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 {}
    }


http://www.kler.cn/a/472843.html

相关文章:

  • SpringBoot3动态切换数据源
  • React Native 项目 Error: EMFILE: too many open files, watch
  • 接口测试-postman(使用postman测试接口笔记)
  • 用OpenCV实现UVC视频分屏
  • 在macOS上安装MySQL
  • 游戏引擎学习第77天
  • 【集成学习】Bootstrap抽样
  • 深度学习——回归实战
  • rust学习——环境搭建
  • 海思Linux-DEMO(1)-sample_venc(h265,h264)视频流文件的获取
  • TRAVEO™ T2G的SWAP功能
  • 服务器及MySQL安全设置指南
  • 使用Postman进行Base64解码
  • 使用 Rust 实现零拷贝数据处理:性能优化的极致探索
  • 如何监听Vuex数据的变化?
  • 第四届智能系统、通信与计算机网络国际学术会议(ISCCN 2025)
  • 虚拟机配置静态ip后出现两个ip问题
  • 单片机毕业设计项目分享(4)
  • 实验四 数组和函数
  • Mysql--基础篇--事务(ACID特征及实现原理,事务管理模式,隔离级别,并发问题,锁机制,行级锁,表级锁,意向锁,共享锁,排他锁,死锁,MVCC)
  • 深入学习RabbitMQ的Direct Exchange(直连交换机)
  • 常见的http状态码 + ResponseEntity
  • 设计模式 结构型 桥接模式(Bridge Pattern)与 常见技术框架应用 解析
  • 【centos8 ES】Elasticsearch linux 龙晰8操作系统安装
  • Flink分区方式有哪些
  • Unity:删除注册表内的项目记录