elementUI根据列表id进行列合并@莫成尘

本文章提供了elementUI根据列表id进行列合并的demo,效果如图(可直接复制代码粘贴)

表格合并

<template><div id="app"><el-table border :data="tableList" style="width: 100%" :span-method="objectSpanMethod"><el-table-columntype="selection"width="55"></el-table-column><el-table-column prop="id" label="ID" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="type" label="后缀"></el-table-column><el-table-column prop="about" label="地址"></el-table-column><el-table-column prop="dec" label="第一联想"></el-table-column></el-table></div>
</template><script>export default {name: 'App',components: {},data() {return {tableList: [{ id: 10010, name: '小日', type: '子', dec: '小男孩来过这个地方', about: '广岛' },{ id: 10010, name: '小日', type: '子', dec: '胖子来过这个地方', about: '长崎' },{ id: 10010, name: '小日', type: '子', dec: '李梅在这里抽过yan', about: '东京' },{ id: 10010, name: '小日', type: '子', dec: '这是一个地震多发的地方', about: '大板' },{ id: 21121, name: '印度', type: '斯坦', dec: '干净又卫生的超级大国', about: '德里' },{ id: 21121, name: '印度', type: '斯坦', dec: '新德里是首都', about: '新德里' },{ id: 21121, name: '印度', type: '斯坦', dec: '这是提前选好的下一个首都', about: '新新德里' },{ id: 21121, name: '印度', type: '斯坦', dec: '没办法的话这是下下个首都', about: '新新新德里' },]}},methods:{//表格合并objectSpanMethod({ row, column, rowIndex, columnIndex }) {console.log(row,column)if ( //if条件判断的是合并那一竖列columnIndex == 0 ||columnIndex == 1 ||columnIndex == 2 ||columnIndex == 3) {const _row = this.flitterData2(this.tableList).one[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col,};}},flitterData2(arr) {let spanOneArr = [];let concatOne = 0;arr.forEach((item, index) => {if (index === 0) {spanOneArr.push(1);} else {//name 修改if (item.id === arr[index - 1].id) {//pid就是判断相同的字段//第一列需合并相同内容的判断条件spanOneArr[concatOne] += 1;spanOneArr.push(0);} else {spanOneArr.push(1);concatOne = index;}}});return {one: spanOneArr,};},}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

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

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

相关文章

2024.9.9营养小题【2】

营养&#xff1a; 1、什么数是丑数&#xff1f; 2、数学数学&#xff0c;丑数的数学意义&#xff0c;哎&#xff0c;数学思维我是忘干净了。 3、可以把while循环换成for循环。由此又想到了一点&#xff0c;三个循环结构各有使用场景。 for(;n%factors[i]0;n/factors[i]){}

网络编程day02(字节序、TCP编程)

目录 【1】字节序 1》大小端转换 2》端口转换 3》IP地址转换 主机字节序转换为网络字节序 &#xff08;小端序->大端序&#xff09; 网络字节序转换为主机字节序&#xff08;大端序->小端序&#xff09; 【2】TCP编程 1》流程 2》函数接口 1> socket 2> …

C# 删除Word文档中的段落

在编辑Word文档时&#xff0c;我们有时需要调整段落的布局、删除不必要的段落以优化文档的结构和阅读体验。本文将通过以下3个简单示例演示如何使用免费.NET库删除Word文档中的段落 。 目录 C# 删除Word中的指定段落 C# 删除Word中的所有段落 C# 删除Word中的空白段落 免费…

分组注解和自定义注解及分页查询

自定义注解的使用步骤 案例&#xff1a; 此时state需要进行的校验使用普通方式无法满足&#xff0c;需要我们根据需求进行自定义注解 创建一个注解 Documented//元注解 Retention(RetentionPolicy.RUNTIME)//元注解 Constraint(validatedBy {StateValidation.class}//指定提供…

网络编程day04(UDP、Linux IO 模型)

目录 【1】UDP 1》通信流程 2》函数接口 1> recvfrom 2> sendto 3》代码展示 1> 服务器代码 2> 客户端代码 【2】Linux IO 模型 场景假设一 1》阻塞式IO&#xff1a;最常见、效率低、不耗费CPU 2》 非阻塞 IO&#xff1a;轮询、耗费CPU&#xff0c;可以处…

Java后台生成二维码

一、效果图 二、实现代码 1.添加依赖 <!-- zxing生成二维码 --> <dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.3.3</version> </dependency><dependency><grou…

大数据之Flink(四)

11、水位线 11.1、水位线概念 一般实时流处理场景中&#xff0c;事件时间基本与处理时间保持同步&#xff0c;可能会略微延迟。 flink中用来衡量事件时间进展的标记就是水位线&#xff08;WaterMark&#xff09;。水位线可以看作一条特殊的数据记录&#xff0c;它是插入到数…

机械学习—零基础学习日志(Python做数据分析02)

现在开始使用Python尝试做数据分析。具体参考的网址链接放在了文章末尾。 引言 我通过学习《利用Python进行数据分析》这本书来尝试使用Python做数据分析。书里让下载&#xff0c;anaconda&#xff0c;使用Jupyter来写代码&#xff0c;只是下载一个anaconda的确有点费时间&am…

计算机的发展史和基本结构

好久不见&#xff0c;粉粉们&#xff0c;我是#Y清墨。今天来分享一下最近学习做的笔记。 计算机发展史和四代计算机概述 阶段 年代 电子元件 运算速度&#xff08;每秒/次&#xff09; 第一代 1946-1958 真空电子管 数千至数万 第二代 1958-1964 晶体管 几十万至百万…

王道考研操作系统笔记(一)

虚拟内存的定义和特征&#xff1a; 基于局部性的原理&#xff0c; 在程序装入时&#xff0c;可以将程序中很快用到的部分装入内存&#xff0c;暂时用不到的数据装入外存&#xff0c;就可以让程序开始执行&#xff0c;在程序执行过程中&#xff0c;当所访问的信息不在内存的时…

更高级的主播美颜体验:直播美颜SDK的集成与开发方案详解

本篇文章&#xff0c;小编将详细解析如何通过直播美颜SDK实现更高级的主播美颜体验&#xff0c;并提供集成与开发的最佳方案。 一、直播美颜SDK的核心功能 直播美颜SDK是一种集成包&#xff0c;能够提供各种美颜功能&#xff0c;帮助主播在直播过程中实时调整面部特征&#…

147.最小栈

题目 链接&#xff1a;leetcode链接 思路 这道题目做起来还是比较简单的&#xff0c;使用两个栈就可以实现题目要求。 其中一个栈s实现栈的基本功能&#xff0c;另一个栈mins实现检索最小元素的功能。 来看一下怎么样实现检索最小元素的功能呢&#xff1f; 我们可以这么…

软件测试工程师面试题大全(附答案)

1、什么是兼容性测试? 答&#xff1a;兼容性测试是检查软件在不同软件平台&#xff0c;硬件平台上是否可以正常运行的测试。主要查看软件在不同操作系统、浏览器、数据库中运行是否正常。 2、你能不能说下你3-5年的职业规划? 答&#xff1a;首先&#xff0c;要巩固自己的测…

[数据集][目标检测]机油泄漏检测数据集VOC+YOLO格式43张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;43 标注数量(xml文件个数)&#xff1a;43 标注数量(txt文件个数)&#xff1a;43 标注类别数…

部分库函数及其模拟

前言&#xff1a;当我们学习c/c库函数的时候&#xff0c;我们可以用网站 cplusplus.com - The C Resources Network 来进行查阅&#xff0c;学习。 目录 库函数&#xff1a; 1.字符串函数 1.1求字符串长度 strlen 1.2长度不受限制的字符串函数 1.2.1strcpy 1.2.2strca…

TCP Analysis Flags 之 TCP Port numbers reused

前言 默认情况下&#xff0c;Wireshark 的 TCP 解析器会跟踪每个 TCP 会话的状态&#xff0c;并在检测到问题或潜在问题时提供额外的信息。在第一次打开捕获文件时&#xff0c;会对每个 TCP 数据包进行一次分析&#xff0c;数据包按照它们在数据包列表中出现的顺序进行处理。可…

【AI绘画】Midjourney光影控制详解

博客主页&#xff1a; [小ᶻZ࿆] 本文专栏: AI绘画 | Midjourney 文章目录 &#x1f4af;前言&#x1f4af;为什么要学习光影控制光影控制的作用 &#x1f4af;强化主题hard lighting&#xff08;硬光 &#xff09;soft lighting&#xff08;软光/柔光&#xff09;测试 &…

【Java 输入流详解:局部与全局定义及资源管理】

Java 输入流详解&#xff1a;局部与全局定义及资源管理 在Java编程中&#xff0c;输入流&#xff08;如Scanner类&#xff09;是读取用户输入的常用方式。通过Scanner&#xff0c;可以方便地读取不同类型的数据&#xff0c;比如整数、字符串等。作为基于输入流的工具&#xff0…

【非零段划分 / 2】

题目 思路 第一种思路&#xff1a;按照表面题意&#xff0c;枚举p&#xff0c;处理数组后进行计数&#xff1a; 复杂度 ∈ O ( n ⋅ m ) 复杂度 \in O(n \cdot m) 复杂度∈O(n⋅m) 第二种思路&#xff1a;把数组看成一个二维的山形图&#xff0c;先将相邻的水平线段转化成点…

一区霜冰算法+双向深度学习模型+注意力机制!RIME-BiTCN-BiGRU-Attention

一区霜冰算法双向深度学习模型注意力机制&#xff01;RIME-BiTCN-BiGRU-Attention 目录 一区霜冰算法双向深度学习模型注意力机制&#xff01;RIME-BiTCN-BiGRU-Attention效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现RIME-BiTCN-BiGRU-Attention霜冰算法…