Vue 学习随笔系列十三 -- ElementUI 表格合并单元格

ElementUI 表格合并单元格

文章目录

  • ElementUI 表格合并单元格
    • @[TOC](文章目录)
    • 一、表头合并
    • 二、单元格合并
      • 1、示例代码
      • 2、示例效果

一、表头合并

参考: https://www.jianshu.com/p/2befeb356a31

二、单元格合并

1、示例代码

<template><div><el-tablesize="small"borderclass="custom-tab":data="tableBody":span-method="objectMergeMethod":cell-style="columnStyle":row-class-name="rowStyle":header-cell-style="{background: '#87CEFA',color: '#38434F',fontWeight: '500',fontSize: '14px',}"><!-- <el-table-column type="index" label="序号" width="58" align="center"></el-table-column> --><el-table-column prop="type" label="姓名" align="center" width="140px"></el-table-column><el-table-column prop="name" label="科目" align="center"></el-table-column><el-table-column prop="sysData" label="成绩" align="center"></el-table-column><el-table-column prop="contractData" label="排名" align="center"></el-table-column></el-table></div>
</template><script>
export default {props: {DiffData: {},isShowOpr: {default: false},},data() {return {// 表体数据tableBody: [{type: "小明",name: "语文",sysData: 10,contractData: "1",isDiff: "是",fhsj: "",},{type: "小明",name: "数学",sysData: 20,contractData: "2",isDiff: "是"},{type: "小明",name: "英语",sysData: 30,contractData: "1",isDiff: "是"},{type: "小明",name: "地理",sysData: 30,contractData: "1",isDiff: "是"},{type: "小明",name: "生物",sysData: 30,contractData: "1",isDiff: "是"},{type: "小李",name: "语文",sysData: 88,contractData: "1",isDiff: "是"},{type: "小李",name: "数学",sysData: 44,contractData: "1",isDiff: "是"},{type: "小李",name: "英语",sysData: 44,contractData: "1",isDiff: "是"},{type: "小李",name: "历史",sysData: 44,contractData: "1",isDiff: "是"},{type: "小李",name: "生物",sysData: 44,contractData: "1",isDiff: "是"},{type: "小王",name: "语文",sysData: 1001,contractData: "1",isDiff: "是"},{type: "小王",name: "数学",sysData: 1001,contractData: "1",isDiff: "是"},{type: "小王",name: "英语",sysData: 1001,contractData: "1",isDiff: "是"},{type: "小王",name: "地理",sysData: 1001,contractData: "1",isDiff: "是"},{type: "小王",name: "生物",sysData: 1001,contractData: "1",isDiff: "是"},],cellList: [], // 单元格数组count: null, // 计数};},watch: {tableBody: {immediate: true,deep: true,handler() {this.computedColumns(this.tableBody)},},},// mounted() {//   // 第1步,根据表体信息,计算合并单元格的信息//   this.computedColumns(this.DiffData);// },methods: {columnStyle({row, column, rowIndex, columnIndex}) {if(columnIndex === 0) {// 表头样式// return "background: #F5F6FA; color: #171A23; font-weight: 500; font-size: 14px; ";if(row.type == '小明') {return 'row-m1'} else if(row.type == '小李') {return 'row-m2'} else if(row.type == '小王') {return 'row-m3'} else if(row.type == 'xxx') {return 'row-m4'}}},rowStyle({ row, rowIndex }) {if(row.type == '小明') {return 'row-m1'} else if(row.type == '小李') {return 'row-m2'} else if(row.type == '小王') {return 'row-m3'} else if(row.type == 'xxx') {return 'row-m4'}// 指定行或列信息样式// if(rowIndex === 7) {//   return 'target-row'// }},// 第1步,遍历表格数据computedColumns(tableBody) {// 循环遍历表体数据for (let i = 0; i < tableBody.length; i++) {if (i == 0) {// 先设置第一项,往 cellList 中追加 1, 若下一项与当前项相同,则往 cellList中追加 0 // count 初始值为 0 this.cellList.push(1); this.count = 0; // console.log("索引", 0, this.count);} else {// 判断当前项与上一项的类别(type)是否相同,若相同则合并这一列的单元格if (tableBody[i].type == tableBody[i - 1].type) {// 如果相同, this.cellList 增加计数 1 ,并向数组追加数据 0this.cellList[this.count] += 1; this.cellList.push(0); // console.log("索引", this.count);} else {// 如果不同,往cellList数组中追加 1,并将索引赋值给 countthis.cellList.push(1); this.count = i; // console.log("索引", this.count);}}}},// 第2步,将计算好的结果返回给el-table,表格会根据结果做出对应合并列渲染objectMergeMethod({ row, column, rowIndex, columnIndex }) {// 给第一列做单元格合并。0 是第一列,1 是第二列。if (columnIndex === 0) {const rowCell = this.cellList[rowIndex];if (rowCell > 0) {const colCell = 1;return {rowspan: rowCell,colspan: colCell,};} else {// 清除所有单元格数据,防止动态数据出现表格偏移现象return {rowspan: 0,colspan: 0,};}}},},
};
</script><style lang="scss" scoped>.vueWrap {.custom-tab {margin: 0 0 20px 0;}}.data-box {display: flex;align-items: center;justify-content: center;.icon {height: 7px;width: 7px;background-color: '#333';margin: 0 2px 0 0;}}::v-deep .el-table--enable-row-transition .el-table__body td.el-table__cell {}::v-deep .target-row {color: #3363FF;font-weight: 500;}::v-deep .row-m1 {background-color: #BBFFFF;color: #333;}::v-deep .row-m2 {background-color: #FFF8DC;color: #333;}::v-deep .row-m3 {background-color: #F0FFF0;color: #333;}::v-deep .row-m4 {background-color: #E0EEE0;color: #333;}.update-btn {color: #4597EB;cursor: pointer;}
</style>

2、示例效果

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/59041.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

每天10个vue面试题(七)

1、Vue如何监听页面url中hash变化&#xff1f; 监听 $route 的变化&#xff1a;在Vue中&#xff0c;你可以使用watch属性来监听$route的变化。当路由发生变化时&#xff0c;会执行相应的处理函数。使用 window.location.hash&#xff1a;直接读取window.location.hash的值。这…

C++ -- 模板进阶

非模板类型参数 模板参数分为类型形参与非类型形参。类型形参&#xff1a;出现在模板参数列表中&#xff0c;跟在class 或 typename之类的参数类型名称。非类型形参&#xff1a;就是用一个常量作为类(函数)模板的一个参数&#xff0c;在类(函数)模板中将该参数当成常量来使用。…

今日 AI 简报|零样本视频生成、移动端轻量语言模型、自动驾驶多模态模型等前沿 AI 技术集中亮相

❤️ 如果你也关注大模型与 AI 的发展现状&#xff0c;且对大模型应用开发非常感兴趣&#xff0c;我会快速跟你分享最新的感兴趣的 AI 应用和热点信息&#xff0c;也会不定期分享自己的想法和开源实例&#xff0c;欢迎关注我哦&#xff01; &#x1f966; 微信公众号&#xff…

SQL中的IN语句和EXISTS语句

大家好&#xff0c;使用SQL时经常需要根据其他表的值过滤数据&#xff0c;常见方法是使用IN和EXISTS子句。这两者都用于检查子查询中值的存在&#xff0c;但它们的工作方式略有不同&#xff0c;并可能对性能产生不同影响。本文将探讨IN和EXISTS的定义、工作原理及其使用场景&am…

【解决方案】Mac上禁止chrome自动更新的三种方法

【目的需求】 新版chrome直接用打印机打印页面时&#xff0c;打印任务总是响一下就消失了&#xff0c;使用safari浏览器无此问题&#xff0c;使用早期版本chrome也没有这一问题。因此想固定chrome版本&#xff0c;不要自动更新。尝试了网上的多种方法均失败。 【解决方案】 …

【运维管理】如何像管理linux一样,批量管理windows主机

很多小伙伴在维护的时候也会难免遇见批量的windows操作&#xff0c;那么一定有人就会问是否有方法可以用命令来批量操作windows主机&#xff0c;其实非常简单&#xff0c;windows早就为我们提供了一个内置的批量管理工具&#xff0c;那就是这个强大的POWERSHELL&#xff0c;今天…

如何监控员工上网行为?实现精准监控员工上网行为的5个妙招分享!(企业:稳了!)

如何监控员工上网行为&#xff1f; 员工上班时的"摸鱼"行为员工上网行为&#xff08;做与工作无关的活动&#xff0c;如浏览社交媒体、游戏、网购等&#xff09;&#xff0c;不仅影响工作效率&#xff0c;还可能破坏团队氛围&#xff0c;阻碍企业发展。 那么&#…

迷茫内耗的一天

迷茫的一天 今天看了看动态规划&#xff0c;不知不觉看了三四个小时&#xff0c;英语也没背&#xff0c;项目也已经停止了一个星期就看了几个小时的xml文件(不停ctrlB)&#xff0c;好累&#xff0c;感觉要学的好多。这难道是必经之路吗&#xff1f; 一个星期算法已经刷了40道题…

Allegro: 开源的高级视频生成模型

我们很高兴地宣布 Allegro 的开源发布&#xff0c;这是 Rhymes AI 先进的文本到视频模型。Allegro 是一款功能强大的人工智能工具&#xff0c;能将简单的文字提示转化为高质量的视频短片&#xff0c;为人工智能生成视频领域的创作者、开发者和研究人员开辟了新的可能性。我们希…

<项目代码>YOLOv8 猫狗识别<目标检测>

YOLOv8是一种单阶段&#xff08;one-stage&#xff09;检测算法&#xff0c;它将目标检测问题转化为一个回归问题&#xff0c;能够在一次前向传播过程中同时完成目标的分类和定位任务。相较于两阶段检测算法&#xff08;如Faster R-CNN&#xff09;&#xff0c;YOLOv8具有更高的…

「Mac畅玩鸿蒙与硬件21」鸿蒙UI组件篇11 - Canvas 组件的静态进阶应用

在鸿蒙应用开发中,Canvas 组件不仅用于基础绘图,还提供了处理复杂路径和渐变效果的多种手段,帮助开发者实现精美的静态图形。本篇将介绍如何在 Canvas 中绘制复杂路径、创建渐变填充效果。 关键词 Canvas 组件复杂路径绘制渐变填充一、Canvas 的复杂路径绘制 Canvas 提供了…

Java 用户随机选择导入ZIP文件,解压内部word模板并入库,Windows/可视化Linux系统某麒麟国防系统...均可适配

1.效果 压缩包内部文件 2.依赖 <!--支持Zip--><dependency><groupId>net.lingala.zip4j</groupId><artifactId>zip4j</artifactId><version>2.11.5</version></dependency>总之是要File类变MultipartFile类型的 好像是…

mint-ui Picker 显示异常

mint-ui Picker 显示异常 现象 最近一个老项目页面显示异常&#xff0c;使用mint-ui Picker显示异常,直接显示成了 数据对象&#xff0c;而不是具体travelName 字段 组件 mint-ui Picker 使用方式(vue方式) // template <mt-picker :slots"slots" value-key…

【重生之我要苦学C语言】深入理解指针2

深入理解指针2 const修饰指针 当const修饰变量时&#xff0c;是无法更该该变量的值的 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> int main() {const int a 10;//const常属性&#xff0c;不能改变的属性a 1;printf("%d\n", a);return 0; }报错&…

TVM前端研究--Pass

文章目录 TVM 中 Pass 分类Pass Infrastructure后端主要数据结构前端数据结构Pass 注册机制注册流程AI 编译器一般采用多级 IR 的架构来处理深度学习模型,不同级别的 IR 包含不同层级的信息。比如,越靠近前端的 IR 一般不包含硬件的信息,越靠近后端,IR 所含信息则与硬件愈相…

半参数模型

4. 半参数模型 (Semi-parametric Model) 半参数模型结合了参数化和非参数化的方法。可以在整体上采用线性回归&#xff0c;但在局部允许非线性变化。这样做的目的是在保持模型的线性解释性的同时&#xff0c;捕捉细微的弧度趋势。 例如&#xff0c;可以定义&#xff1a; y …

终于弄懂了Python字符串的操作

字符串的操作 在 Python 中&#xff0c;字符串不仅是存储文本的工具&#xff0c;还提供了多种操作来处理和管理这些文本数据。通过掌握字符串的各种操作&#xff0c;程序员可以更加灵活地处理信息&#xff0c;实现不同的需求。以下将详细介绍字符串的常见操作&#xff0c;包括…

LInux系统编程(二)操作系统和进程

目录 一、前言&#xff1a;冯诺依曼体系结构 1、图中各个单元的介绍 2、值得注意的几点 二、操作系统 1、操作系统分层图 2、小总结 三、 进程&#xff08;重点&#xff09; 1、进程的基本概念 2、存放进程信息的数据结构——PCB&#xff08;Linux 下称作 task_struct…

加法电路和减法电路

一、加法电路 下边为加法电路的拓扑结构 加法电路作用1: 直流量叠加 如上图仿真所示,利用放大器LM324AD进行加法电路的仿真,输入为直流+1V和直流+2V,经过加法运算,根据上边Uo的计算公式进行计算,可得Uo=-3V,和仿真结果保持一致。如下图所示。 加法电路作用2: 信号叠加…

Kafka系列之:对做了条带划分的Kafka节点磁盘实现扩容的技术方案

Kafka系列之:对做了条带划分的Kafka节点磁盘实现扩容的技术方案 一、查看磁盘条带扩容情况二、查看逻辑卷及其关联的物理卷和逻辑卷快照三、显示文件系统磁盘空间使用情况及文件系统类型四、对每块盘扩容五、更改物理卷的大小六、扩展逻辑卷七、扩展XFS文件系统的大小八、扩容…