elementui,iview等 表格单元格合并之固定列

要的效果如下
在这里插入图片描述
需要合并 show weak 及 Siginin这三列

上代码

<template><Table:columns="columns":span-method="handleSpan":data="data"bordersize="small"ref="table"></Table>
</template>
<script>
export default {data() {return {columns: [{title: "Name",key: "name",fixed: "left",width: 200,children: [{title: "Show",key: "show",width: 150,sortable: true,fixed: "left",},{title: "Weak",key: "weak",width: 150,sortable: true,fixed: "left",},{title: "Signin",key: "signin",width: 150,sortable: true,fixed: "left",},],},{title: "Click",key: "click",width: 150,sortable: true,},{title: "Active",key: "active",width: 150,sortable: true,},{title: "7, retained",key: "day7",width: 150,sortable: true,},{title: "30, retained",key: "day30",width: 150,sortable: true,},{title: "The next day left",key: "tomorrow",width: 150,sortable: true,},{title: "Day Active",key: "day",width: 150,sortable: true,},{title: "Week Active",key: "week",width: 150,sortable: true,},{title: "Month Active",key: "month",width: 150,sortable: true,},],data: [{name: "Name1",fav: 0,show: "show",weak: "weak",signin: "signin",click: "click",active: "active",day7: "day7",day30: "day30",tomorrow: "tomorrow",day: "day",week: "week",month: "month",},{name: "Name2",fav: 0,show: "show2",weak: "weak2",signin: "signin2",click: "clic2",active: "active2",day7: "day72",day30: "day302",tomorrow: "tomorrow2",day: "day2",week: "week2",month: "month2",},{name: "Name3",fav: 0,show: "show3",weak: "weak3",signin: "signin3",click: "click3",active: "active3",day7: "day73",day30: "day303",tomorrow: "tomorrow3",day: "day3",week: "week3",month: "month3",},],};},methods: {handleSpan({ row, column, rowIndex, columnIndex }) {if (columnIndex ===0) {return [1, 3];}else if(columnIndex>0&&columnIndex<3){return [0, 0];} else {return [1, 1];}},},
};
</script>

主要 handleSpan 方法

  • 这些ui框架的合并策略 返回 [0,0] 才会不占据位置,才不会错乱,合并[1,3]后还需要考虑 被占据位置后的单元格
  • 上面代码的意思就是 columnIndex 为0时,合并第一个到第三个单元格,columnIndex大于0 并且小于3时 不占据位置 其他的还是占据 [1,1]

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

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

相关文章

R实验 基础(一)

实验目的&#xff1a; 了解实验报告书的书写要求&#xff1b;掌握R、RStudio的下载与安装&#xff1b;熟悉R的界面及基本操作&#xff1b;进一步熟悉R和RStudio的界面及基本操作&#xff1b;初步了解R的绘图和程序包的下载、安装和加载使用。 实验内容&#xff1a; 了解实验报…

Python sort() 和 sorted() 的区别应用实例详解

大家好&#xff0c;今天针对 Python 中 sort() 和 sorted() 之间的区别&#xff0c;来一个实例详细解读。sort — 顾名思义就是排序的意思&#xff0c;它可以接收的对象为可迭代的数据类型。今天以列表为例子演示两者的不同点、相同点&#xff0c;以及其中一些常用的高级参数使…

【知识碎片】2024_05_14

本篇记录了两道关于位运算的选择题&#xff0c;和一道有点思维的代码题。 C语言碎片知识 求函数返回值&#xff0c;传入 -1 &#xff0c;则在64位机器上函数返回&#xff08; &#xff09; int func(int x) {int count 0;while (x){count;x x&(x - 1);//与运算} return c…

24/05/14总结

签到2&#xff1a; 签到界面上有时间显示&#xff0c;签到码输入框&#xff0c;开始签到&#xff0c;当倒计时结束&#xff0c;老师端和学生端都会显示签到结果&#xff0c;所以签到结果需要建表&#xff1a;&#xff08;签到了的学生和未签到的学生&#xff0c; 这次签到的时间…

详述进程的地址空间

进程的地址空间 合法的地址 (可读或可写) 代码 (main, %rip 会从此处取出待执行的指令)&#xff0c;只读数据 (static int x)&#xff0c;读写堆栈 (int y)&#xff0c;读写运行时分配的内存 (???)&#xff0c;读写动态链接库 (???) 非法的地址 NULL&#xff0c;导致 se…

【微命令】git config如何配置全局的用户和邮箱?(--global user.name、user.email;git config --help)

虽然经常用&#xff0c;也经常忘记&#xff0c;特此记录。 命令 git config --global user.name "myname" git config --global user.email test163.com另外一种方式 help git config --help |grep email | grep name直接help查看

Git系列:git log 掌握版本控制的精髓

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

【leetcode面试经典150题】-27. 移除元素

88.合并两个有序数组 1 题目介绍1 个人解题思路1.1 解题代码1.2 思路解析 2、分析官方题解2.1 单侧双指针2.2 双侧双指针 1 题目介绍 给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。 不要使用额外…

Echarts结课之小杨总结版

Echarts结课之小杨总结版 前言基础回顾框架sale框架代码&#xff1a; user框架基础代码&#xff1a; inventory框架基础代码&#xff1a; total框架基础代码&#xff1a; 基础设置1.标题(Title)2.图例(Legend)实现 3.工具提示(Tooltip)实现 4.X轴(X Axis) 和 Y轴(Y Axis)5.数据…

「Qt Widget中文示例指南」如何实现一个快捷编辑器(二)

Qt 是目前最先进、最完整的跨平台C开发工具。它不仅完全实现了一次编写&#xff0c;所有平台无差别运行&#xff0c;更提供了几乎所有开发过程中需要用到的工具。如今&#xff0c;Qt已被运用于超过70个行业、数千家企业&#xff0c;支持数百万设备及应用。 快捷编辑器示例展示…

Leetcode 第 129 场双周赛题解

Leetcode 第 129 场双周赛题解 Leetcode 第 129 场双周赛题解题目1&#xff1a;3127. 构造相同颜色的正方形思路代码复杂度分析 题目2&#xff1a;3128. 直角三角形思路代码复杂度分析 题目3&#xff1a;3129. 找出所有稳定的二进制数组 I思路代码复杂度分析 题目4&#xff1a;…

电子邮箱是什么?怎么申请一个电子邮箱?

电子邮箱是我们沟通的工具&#xff0c;细分为免费版电子邮箱和付费版电子邮箱。怎么申请一个属于自己的电子邮箱&#xff1f;今天小编就分享一下电子邮箱注册教程&#xff0c;手把手教您注册一个电子邮箱。 一、电子邮箱的定义 电子邮箱&#xff0c;简称邮箱&#xff0c;是一…

BGP路由优选

1.BGP路由优选规则 上述规则依序排列&#xff0c;BGP进行路由优选时&#xff0c;从第一条规则开始执行&#xff0c;如果根据第一条规则无法作出判断&#xff0c;例如路由的Preferred-Value属性值相同&#xff0c;则继续执行下一条规则&#xff0c;如果根据当前的规则&#xff0…

如何快速打开多个网页?

在平常的工作当中&#xff0c; 如果每天都需固定打开几个网站&#xff0c;可以通过创建一个批处理&#xff0c;一键打开需要的所有网站。 使用方法&#xff1a; 在桌面新建一个txt文本&#xff0c;按照以下格式输入代码&#xff0c;并将需要打开网站的地址输入进去。 ​ ec…

JavaScript异步编程——11-异常处理方案【万字长文,感谢支持】

异常处理方案 在JS开发中&#xff0c;处理异常包括两步&#xff1a;先抛出异常&#xff0c;然后捕获异常。 为什么要做异常处理 异常处理非常重要&#xff0c;至少有以下几个原因&#xff1a; 防止程序报错甚至停止运行&#xff1a;当代码执行过程中发生错误或异常时&#x…

虚拟化技术 在vCenter Server创建数中心、添加主机

一、实验内容 1.安装Flash 2.在vCenter Server创建数中心、添加主机 二、实验主要仪器设备及器材 1.安装有64位Windows操作系统的台式电脑或笔记本电脑&#xff0c;建议4C8G或以上配置 2.在Windows Server 2008 R2已安装vCenter Server 3.Adobe Flash Player 12.0.0.70.e…

算法-卡尔曼滤波之卡尔曼滤波的第一个方程:状态更新方程

通过一个例子来引出卡尔曼滤波的状态更新方程&#xff1b; 这里系统状态是金条的重量&#xff1b; 为了估计系统的状态&#xff0c;我们可以多次测量金条的重量&#xff0c;然后求平均值&#xff1b; 其中估计值是所有测量值的平均值&#xff1b; 由于我们使用的是静态模型&am…

第十六节:图 (20节)

一 图的概念 1&#xff09;由点的集合和边的集合构成 2&#xff09;虽然存在有向图和无向图的概念&#xff0c;但实际上都可以用有向图来表达 3&#xff09;边上可能带有权值 二 图结构的表达 1&#xff09;邻接表法 2&#xff09;邻接矩阵法 3&#xff09;除此之外还有其他众多…

【完整过程】Windows下记录PadleOCR训练自己的ocr模型

一、前期准备 1、代码 参考的博主使用的是2.6版本的 博主的paddleocr代码 下面这个是官方的&#xff0c;可能已经更新了&#xff08;我用的是官网当前最新版&#xff09; paddleocr的源代码 注意&#xff1a;最好把上面两个代码都下载下来&#xff0c;后面都会用到 参考博…

先有JVM还是先有垃圾回收器?

是先有垃圾回收器再有JVM呢&#xff0c;还是先有JVM再有垃圾回收器呢&#xff1f;或者是先有垃圾回收再有JVM呢&#xff1f;历史上还真是垃圾回收更早面世&#xff0c;垃圾回收最早起源于1960年诞生的LISP语言&#xff0c;Java只是支持垃圾回收的其中一种。下面我们就来刨析刨析…