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.rhkb.cn/news/462724.html

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

相关文章

吴恩达深度学习笔记:卷积神经网络(Foundations of Convolutional Neural Networks)4.3-4.4

目录 第四门课 卷积神经网络&#xff08;Convolutional Neural Networks&#xff09;第四周 特殊应用&#xff1a;人脸识别和神经风格转换&#xff08;Special applications: Face recognition &Neural style transfer&#xff09;4.3 Siamese 网络&#xff08;Siamese net…

vue data变量之间相互赋值或进行数据联动

摘要&#xff1a; 使用vue时开发会用到data中是数据是相互驱动&#xff0c;经常会想到watch,computed&#xff0c;总结一下&#xff01; 直接赋值&#xff1a; 在 data 函数中定义的变量可以直接在方法中进行赋值。 export default {data() {return {a: 1,b: 2};},methods: {u…

安装Blender并使用

前言 该系列记录了如何用Blenderpro来构建自己的场景数据集&#xff0c;从环境搭建到后期构建数据集的整个流程 本文章是第一部分&#xff0c;BlenderPrc2的安装以及环境配置 部分参考https://blog.csdn.net/weixin_49521551/article/details/121573334 官方文档https://dlr…

百度SEO分析实用指南 提升网站搜索排名的有效策略

内容概要 在数字化时代&#xff0c;搜索引擎优化&#xff08;SEO&#xff09;已经成为提升网站曝光度的关键工具。本指南将带您了解SEO的基本知识&#xff0c;帮助您在复杂的网络环境中立足。我们将从关键词优化开始&#xff0c;重点讲解如何选择合适的关键词来提高搜索引擎排…

【蔬菜识别】Python+深度学习+CNN卷积神经网络算法+TensorFlow+人工智能+模型训练

一、介绍 蔬菜识别系统&#xff0c;本系统使用Python作为主要编程语言&#xff0c;通过收集了8种常见的蔬菜图像数据集&#xff08;‘土豆’, ‘大白菜’, ‘大葱’, ‘莲藕’, ‘菠菜’, ‘西红柿’, ‘韭菜’, ‘黄瓜’&#xff09;&#xff0c;然后基于TensorFlow搭建卷积神…

ESP8266 自定义固件烧录-Tcpsocket固件

一、固件介绍 固件为自定义开发的一个适配物联网项目的开源固件&#xff0c;支持网页配网、支持网页tcpsocket服务器配置、支持串口波特率设置。 方便、快捷、稳定&#xff01; 二、烧录说明 固件及工具打包下载地址&#xff1a; https://download.csdn.net/download/flyai…

探秘机器学习算法:智慧背后的代码逻辑

1、 线性回归 线性回归是预测连续变量的一种简单而有效的方法。其数学模型假设因变量 y 与自变量 x 之间存在线性关系&#xff0c;用公式表示为&#xff1a; ​ Python代码实现 import numpy as np from sklearn.linear_model import LinearRegression import matplotlib.…

【合肥工业大学】操作系统 习题解析 作业答案(仅作学习与交流/侵删)

第一章习题解析 1&#xff0e;设计现代OS的主要目标是什么&#xff1f; 答&#xff1a;&#xff08;1&#xff09;有效性 &#xff08; 2&#xff09;方便性 &#xff08; 3&#xff09;可扩充性 &#xff08; 4&#xff09;开放性 2&#xff0e; OS 的作用可表现在哪几个方…

要在微信小程序中让一个 `view` 元素内部的文字水平垂直居中,可以使用 Flexbox 布局

文章目录 主要特点&#xff1a;基本用法&#xff1a;常用属性&#xff1a; 要在微信小程序中让一个 view 元素内部的文字水平垂直居中&#xff0c;可以使用 Flexbox 布局。以下是如何设置样式的示例&#xff1a; .scan-button {display: flex; /* 启用 Flexbox 布局 */justify…

JSON交互处理

目录 一、什么是JSON 二、JSON和JavaScript对象互转 ​三、Controller返回JSON数据 3.1 使用Jackson 编写Controller 1. 一个对象 2. 多个对象 3. 输出时间对象 4. 优化&#xff1a;抽取为工具类 一、什么是JSON Json是JavaScript对象的字符串表示法&#xff0c;它用…

WPF+MVVM案例实战(十二)- 3D数字翻牌计时实现

文章目录 1、运行效果2、功能实现1、文件创建2、控件代码实现3、控件引用与菜单实现1.引用用户控件2.按钮菜单3、计时器界面实现4、源代码获取1、运行效果 3D数字翻牌计时 2、功能实现 1、文件创建 打开项目 Wpf_Examples ,在用户控件 UserControlLib 中创建 NumberFoldi…

无人机多机编队控制算法详解!

一、主要算法类型 长机-僚机法&#xff08;Leader-Follower&#xff09; 原理&#xff1a;通过设定一架无人机作为长机&#xff08;领航者&#xff09;&#xff0c;其他无人机作为僚机&#xff08;跟随者&#xff09;&#xff0c;僚机根据长机的信息来调整自身的飞行状态&#…

RL学习笔记-表格型方法

参考资料&#xff1a;蘑菇书&#xff1b;《世界冠军带你从零实践强化学习》B站课程 Q表格 前面讲马尔可夫过程的时候提到过Q函数&#xff0c;Q函数是在某状态s下采取某动作a得到的平均奖励&#xff08;状态动作价值&#xff09;。Q表格就是在状态和动作两个维度上可视化的一张二…

基于SSM+微信小程序的订餐管理系统(点餐2)

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1、项目介绍 基于SSM微信小程序的订餐管理系统实现了管理员和用户。管理端实现了 首页、个人中心、用户管理、菜品分类管理、菜品信息管理、订单信息管理、配送信息管理、菜品评价管理、订单投诉管理、…

太速科技-712-6U VPX飞腾处理器刀片计算机

6U VPX飞腾处理器刀片计算机 一、产品概述 该产品是一款基于国产飞腾FT-2000四核处理器或D2000八核处理器的高性能6U VPX刀片式计算机。产品提供了可支持全网状交换的高速数据通道&#xff0c;其中P1、P2均支持1个PCIe x16 Gen3或2个PCIe x8 Gen3或4个PCIe x4 Gen3总…

uaGate SI——实现OT与IT的安全连接

对于许多制造商来说&#xff0c;诸如工业物联网&#xff08;IIoT&#xff09;、信息物理系统&#xff08;CPS&#xff09;和大数据等概念已经开始与其智能工厂的愿景紧密相连。智能工厂是将信息技术&#xff08;IT&#xff09;的数字世界与运营技术&#xff08;OT&#xff09;的…

51c大模型~合集12

我自己的原文哦~ https://blog.51cto.com/whaosoft/11564858 #ProCo 无限contrastive pairs的长尾对比学习 , 个人主页&#xff1a;https://andy-du20.github.io 本文介绍清华大学的一篇关于长尾视觉识别的论文: Probabilistic Contrastive Learning for Long-Tailed Visua…

基于FPGA的图像双线性插值算法verilog实现,包括tb测试文件和MATLAB辅助验证

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 (完整程序运行后无水印) 这里实现的是256*256双线性插值到512*512的系统模块 局部放大&#xff1a; 将数据导入到matlab&#xff0c;得到插值效果…

书生大模型第一关Linux基础知识

任务一&#xff1a;完成SSH连接与端口映射并运行hello_world.py 1.SSH及其端口映射 2.在VSCode中安装插件&#xff1a; 3.创建开发机 最后点击创建&#xff0c;然后可能需要等待一段较长的时间&#xff0c;大概需要5分钟左右&#xff0c;如果需要排队则更长时间 然后选择…

SpringBoot配置Access-Control-Allow-Origin

1. 配置过滤器 Component WebFilter(urlPatterns "/*", filterName "CorsFilter") public class CorsFilter implements Filter {Overridepublic void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, Serv…