el-table/avue-curd 相同列内容合并

2023-12-13 19:36

本文主要是介绍el-table/avue-curd 相同列内容合并,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1.效果

2.html

3.js

 spanMethod({ row, column, rowIndex }) {if (column.property === 'deviceName') {if (rowIndex > 0 && row.deviceName === this.data[rowIndex - 1].deviceName) {return {rowspan: 0,colspan: 1,};}let rowspan = 1;for (let i = rowIndex + 1; i < this.data.length; i++) {if (this.data[i].deviceName === row.deviceName) {rowspan++;} else {break;}}return {rowspan: rowspan,colspan: 1,};} else if (column.property === 'deviceCode') {if (rowIndex > 0 && row.deviceCode === this.data[rowIndex - 1].deviceCode) {return {rowspan: 0,colspan: 1,};}let rowspan = 1;for (let i = rowIndex + 1; i < this.data.length; i++) {if (this.data[i].deviceCode === row.deviceCode) {rowspan++;} else {break;}}return {rowspan: rowspan,colspan: 1,};} else if (column.property === 'installSite') {if (rowIndex > 0 && row.installSite === this.data[rowIndex - 1].installSite) {return {rowspan: 0,colspan: 1,};}let rowspan = 1;for (let i = rowIndex + 1; i < this.data.length; i++) {if (this.data[i].installSite === row.installSite) {rowspan++;} else {break;}}return {rowspan: rowspan,colspan: 1,};}// 其他列不进行合并return {rowspan: 1,colspan: 1,}},

这篇关于el-table/avue-curd 相同列内容合并的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/489687

相关文章

如何解决Pycharm编辑内容时有光标的问题

《如何解决Pycharm编辑内容时有光标的问题》文章介绍了如何在PyCharm中配置VimEmulator插件,包括检查插件是否已安装、下载插件以及安装IdeaVim插件的步骤... 目录Pycharm编辑内容时有光标1.如果Vim Emulator前面有对勾2.www.chinasem.cn如果tools工

关于Spring @Bean 相同加载顺序不同结果不同的问题记录

《关于Spring@Bean相同加载顺序不同结果不同的问题记录》本文主要探讨了在Spring5.1.3.RELEASE版本下,当有两个全注解类定义相同类型的Bean时,由于加载顺序不同,最终生成的... 目录问题说明测试输出1测试输出2@Bean注解的BeanDefiChina编程nition加入时机总结问题说明

C#比较两个List集合内容是否相同的几种方法

《C#比较两个List集合内容是否相同的几种方法》本文详细介绍了在C#中比较两个List集合内容是否相同的方法,包括非自定义类和自定义类的元素比较,对于非自定义类,可以使用SequenceEqual、... 目录 一、非自定义类的元素比较1. 使用 SequenceEqual 方法(顺序和内容都相等)2.

MySQL表的CURD使用

《MySQL表的CURD使用》文章主要介绍了MySQL数据库操作的基本方法,包括创建表、插入数据、查询数据、更新数据和删除数据等,涵盖了表结构设计、数据插入、查询条件、排序、分页、更新和删除操作,以及... 目录一、Create1.1单行数据+全列插入1.2多行数据+指定列插入1.3插入否则更新主键冲突1.

使用Python合并 Excel单元格指定行列或单元格范围

《使用Python合并Excel单元格指定行列或单元格范围》合并Excel单元格是Excel数据处理和表格设计中的一项常用操作,本文将介绍如何通过Python合并Excel中的指定行列或单... 目录python Excel库安装Python合并Excel 中的指定行Python合并Excel 中的指定列P

基于C#实现PDF文件合并工具

《基于C#实现PDF文件合并工具》这篇文章主要为大家详细介绍了如何基于C#实现一个简单的PDF文件合并工具,文中的示例代码简洁易懂,有需要的小伙伴可以跟随小编一起学习一下... 界面主要用于发票PDF文件的合并。经常出差要报销的很有用。代码using System;using System.Col

Python视频剪辑合并操作的实现示例

《Python视频剪辑合并操作的实现示例》很多人在创作视频时都需要进行剪辑,本文主要介绍了Python视频剪辑合并操作的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习... 目录介绍安装FFmpegWindowsMACOS安装MoviePy剪切视频合并视频转换视频结论介绍

el-select下拉选择缓存的实现

《el-select下拉选择缓存的实现》本文主要介绍了在使用el-select实现下拉选择缓存时遇到的问题及解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录项目场景:问题描述解决方案:项目场景:从左侧列表中选取字段填入右侧下拉多选框,用户可以对右侧

不删数据还能合并磁盘? 让电脑C盘D盘合并并保留数据的技巧

《不删数据还能合并磁盘?让电脑C盘D盘合并并保留数据的技巧》在Windows操作系统中,合并C盘和D盘是一个相对复杂的任务,尤其是当你不希望删除其中的数据时,幸运的是,有几种方法可以实现这一目标且在... 在电脑生产时,制造商常为C盘分配较小的磁盘空间,以确保软件在运行过程中不会出现磁盘空间不足的问题。但在

在C#中合并和解析相对路径方式

《在C#中合并和解析相对路径方式》Path类提供了几个用于操作文件路径的静态方法,其中包括Combine方法和GetFullPath方法,Combine方法将两个路径合并在一起,但不会解析包含相对元素... 目录C#合并和解析相对路径System.IO.Path类幸运的是总结C#合并和解析相对路径对于 C