实现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…

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

你知道三拳打死镇关西的故事吗&#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;第五题. 如何获…

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

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

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…

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;。那么矩形窗就相…

使用jQuery的autocomplete实现数据查询一次,联想自动补全

书接上回&#xff0c;上次说到在jsp页面中&#xff0c;通过监听输入框的数值变化&#xff0c;实时查询数据库&#xff0c;得到返回值使用autocomplete属性自动补全&#xff0c;实现一个联想补全辅助操作&#xff0c;链接&#xff1a;使用jquery的autocomplete属性实现联想补全操…

二、Kubernetes(k8s)中部署项目wordpress(php博客项目,数据库mysql)

前期准备 1、关机顺序 2、开机顺序 (1)、k8s-ha1、k8s-ha2 (2)、master01、master02、master03 (3)、node01、node02 一、集群服务对外提供访问&#xff0c;需要通过Ingress代理发布域名 mast01上传 ingress-nginx.yaml node01、node02 上传 ingress-nginx.tar 、kube-webh…

鸿蒙开发实战:【网络管理-Socket连接】

介绍 本示例主要演示了Socket在网络通信方面的应用&#xff0c;展示了Socket在两端设备的连接验证、聊天通信方面的应用。 效果预览 使用说明 1.打开应用&#xff0c;点击用户文本框选择要登录的用户&#xff0c;并输入另一个设备的IP地址&#xff0c;点击确定按钮进入已登录…

【C++】用红黑树模拟实现set、map

目录 前言及准备&#xff1a;一、红黑树接口1.1 begin1.2 end1.3 查找1.4 插入1.5 左单旋和右单旋 二、树形迭代器&#xff08;正向&#xff09;2.1 前置 三、模拟实现set四、模拟实现map 前言及准备&#xff1a; set、map的底层结构是红黑树&#xff0c;它们的函数通过调用红…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:Toggle)

组件提供勾选框样式、状态按钮样式及开关样式。 说明&#xff1a; 该组件从API Version 8开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 仅当ToggleType为Button时可包含子组件。 接口 Toggle(options: { type: ToggleType, is…

一台电脑安装多个版本node,如何切换使用

直接上答案&#xff0c;请安装nvm——nodejs的版本管理工具 官网地址在此&#xff1a;nvm文档手册 - nvm是一个nodejs版本管理工具 - nvm中文网 (uihtm.com) 1.由于我电脑本来就有node14&#xff0c;所以需要先卸载 原来的node&#xff0c;建议在软件目录自带的node文件夹中点…