实现el-table合并列

效果图如下
在这里插入图片描述

<el-table :data="atlasDataList" style="width: 100%" :span-method="spanMethod"><el-table-column prop="stationName" label="" width="180" /><el-table-column prop="atlasNumber" label="" width="180" /><el-table-column prop="atlasName" label="图册名称" width="180" /></el-table><script setup>import { objectSpanMethod } from './spanMethod';//调用合并行的方法const spanMethod = ({ row, column, rowIndex, columnIndex }) => {if (columnIndex < 2) { // 只合并前两列return objectSpanMethod({ row, column, rowIndex, columnIndex }, atlasTypeList.value.length);} else {return { rowspan: 1, colspan: 1 }; // 不合并其他列}};// 合并列的计算方法export const objectSpanMethod = ({row,column,rowIndex,columnIndex,}, mergeCount) => {// 每 mergeCount 行合并if (rowIndex % mergeCount === 0) {return {rowspan: mergeCount,colspan: 1,};} else {return {rowspan: 0,colspan: 0,};}};</script>

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

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

相关文章

中间件-消息队列

消息队列基础知识 什么是消息队列 本处提到的消息队列是指各个服务以及系统组件/模块之间的通信&#xff0c;属于一种中间件。参与消息传递的双方称为生产者和消费者&#xff0c;生产者负责发送消息&#xff0c;消费者负责处理消息。 消息队列作用 通过异步处理&#xff0…

Java 多线程(超详细讲解)上篇

多线程可以使程序在同一时间内执行多个操作&#xff0c;采用Java中的多线程机制可以使计算机资源得到更充分的利用&#xff0c;多线程技术在网络编程中有广泛的应用。一、进程与线程 进程是程序的一次动态执行过程&#xff0c;它是从代码加载、执行中到执行完毕的一个完整过程…

你知道三拳打死镇关西的故事吗?郑屠户做了什么让鲁达竟将他置于死地?

你知道三拳打死镇关西的故事吗&#xff1f;郑屠户做了什么让鲁达竟将他置于死地&#xff1f; 《水浒传》第二集里&#xff0c;咱们看到了鲁提辖&#xff0c;也就是鲁达&#xff0c;他为啥要打郑屠户&#xff0c;也就是人们常说的镇关西。这鲁提辖可是个仗义疏财的好汉&#xf…

好委屈,东方甄选为何总是被供应商骗?

东方甄选最近很委屈。 315晚会过后&#xff0c;知名打假人王海爆料&#xff0c;称315晚会曝光的槽头肉扣肉在东方甄选和小杨哥的直播间里销售过。 东方甄选赶忙去问了问供应商情况。 供应商的回答让他感到暖心&#xff0c;表示虽然315晚会曝光了我们公司违规使用糟头肉&…

vue3项目

案例用到的知识点如下&#xff1a; ① vite 创建项目 ② 组件的封装与注册 ③ props ④ 样式绑定 ⑤ 计算属性 ⑥ 自定义事件 ⑦ 组件上的 v-model 效果如下图&#xff1b; 页面2 项目结构&#xff1a; 初始化项目 在终端运行以下的命令&#xff0c;初始化 vite 项目&#xf…

每日五道java面试题之mybatis篇(五)

目录&#xff1a; 第一题. 实体类属性名和表中字段名不⼀样 &#xff0c;怎么办?第二题. Mybatis是否可以映射Enum枚举类&#xff1f;第三题. Mybatis能执⾏⼀对⼀、⼀对多的关联查询吗&#xff1f;第四题. Mybatis是否⽀持延迟加载&#xff1f;原理&#xff1f;第五题. 如何获…

每日三个JAVA经典面试题(十七)

1.Java 中的线程池是如何实现的 Java中的线程池主要通过java.util.concurrent包提供的Executor框架实现。线程池的核心是重用一组现有线程来执行任务&#xff0c;而不是为每个任务创建新线程。这样做可以减少因频繁创建和销毁线程带来的开销&#xff0c;提高系统资源的利用率&…

Android逆向(二)-系统调试开关

Android逆向(二)-系统调试开关 本篇文章主要介绍下android下的系统调试开关. 1: build.prop简介 android中有一些常用的配置信息都存放在一个文件中,如:设备系统/版本号/Cpu等信息. 而这个文件就是/system/build.prop 我们先简单看下这个文件: zhzh:~/workSpace$ adb she…

【项目实践day06】JWT令牌相关

什么是JWT 简洁的、自包含的格式&#xff0c;用于在通信双方以json数据格式安全的传输信息。 由于数字签名的存在&#xff0c;这些信息是可靠的。 jwt就是将原始的json数据格式进行了安全的封装&#xff0c;这样就可以直接基于jwt在通信双方安全的进行信息传输了。简洁&#…

Playwright中locator() 方法快速定位网页元素[全面总结]

Playwright 是一个用于浏览器自动化的库&#xff0c;它支持多种浏览器和多种语言。在 Playwright 中&#xff0c;page.locator() 方法用于创建一个元素定位器&#xff08;Element Locator&#xff09;。元素定位器是一个强大的工具&#xff0c;可以帮助你在页面上找到并操作元素…

【前端基础】什么是视口?

视口 了解视口相关概念及理想视口的设置 是移动Web开发非常重要环节。 什么是视口&#xff1f; 视口简单来说就是浏览器显示页面内容的区域。 在PC端&#xff0c;正常的视口宽度就是整个浏览器的窗口可视区的宽度&#xff0c;会随着浏览器窗口大小的重置而缩放&#xff1b;…

CTF 题型 SSRF攻击例题总结

CTF 题型 SSRF攻击&例题总结 文章目录 CTF 题型 SSRF攻击&例题总结Server-side Request Forgery 服务端请求伪造SSRF的利用面1 任意文件读取 前提是知道要读取的文件名2 探测内网资源3 使用gopher协议扩展攻击面Gopher协议 &#xff08;注意是70端口&#xff09;python…

前端项目,个人笔记(五)【图片懒加载 + 路由配置 + 面包屑 + 路由行为修改】

目录 1、图片懒加载 步骤一&#xff1a;自定义全局指令 步骤二&#xff1a;代码中使用 ​编辑步骤三&#xff1a;效果查看 步骤四&#xff1a;代码优化 2、封装组件案例-传对象 3、路由配置——tab标签 4、根据tab标签添加面包屑 4.1、实现 4.2、bug&#xff1a;需要…

智能合约 之 部署ERC-20

Remix介绍 Remix是一个由以太坊社区开发的在线集成开发环境&#xff08;IDE&#xff09;&#xff0c;旨在帮助开发者编写、测试和部署以太坊智能合约。它提供了一个简单易用的界面&#xff0c;使得开发者可以在浏览器中直接进行智能合约的开发&#xff0c;而无需安装任何额外的…

进销存管理完整方案:那些让人头疼的进销存难题及解决方法!

什么是进销存管理&#xff1f;为何进销存管理在企业管理中如此重要&#xff1f;进销存管理的核心模块包括哪些&#xff1f;为何企业在进销存管理中常常遭遇前后方协作不畅、数据不同步等痛点&#xff1f;又该如何针对进销存管理痛点进行优化&#xff1f;本文将从进销存管理的基…

代码随想录训练营第50天 | LeetCode 123.买卖股票的最佳时机III、LeetCode 188.买卖股票的最佳时机IV

LeetCode 123.买卖股票的最佳时机III 文章讲解&#xff1a;代码随想录(programmercarl.com) 视频讲解&#xff1a;动态规划&#xff0c;股票至多买卖两次&#xff0c;怎么求&#xff1f; | LeetCode&#xff1a;123.买卖股票最佳时机III_哔哩哔哩_bilibili 思路 代码如下&am…

java实现kml文件下载接口

根据业务需求&#xff0c;需提供一个下载kml格式航线文件的HTTP GET接口 示例代码 package com.kyrielx.kmzdemo.controller;import org.apache.commons.io.FileUtils; import org.springframework.http.HttpHeaders; import org.springframework.http.HttpStatus; import org…

git是什么git能做什么

git是什么 git 是一个免费、开源、分布式的版本控制系统&#xff0c;跟踪个人和团队在项目上协作时的变更历史。随着开发者对项目进行更改&#xff0c;可以随时恢复项目的任何早期版本。 git能做什么 开发者可以通过git查看项目历史&#xff0c;了解&#xff1a; - 做了哪些…

5.首页搜索与瀑布流

搜索栏 官网 https://vkuviewdoc.fsq.pub/components/search.html 是否开启右边控件 该控件为类似按钮形式&#xff0c;可以设置为"搜索"或者"取消"等内容&#xff0c;如果开启动画效果&#xff0c;用户确认搜索后&#xff0c;该控件会自动消失 show-ac…

各种窗函数对脉压结果的影响

雷达导论专栏总目录链接: 雷达导论专栏总目录-CSDN博客 1. 各类窗函数 有几个窗函数的系数可配,配置如下: tukeywin(N,0.75)kaiser(N,2.5)gausswin(N,1.5)taylorwin(N,3,-24)2. 时域加窗 时域加窗时,直接加在匹配滤波函数上:Htw=exp(1j*pi*K*tp.^2).*win;。那么矩形窗就相…