el-table 合并单元格后 hover错乱

2024-08-30 12:44

本文主要是介绍el-table 合并单元格后 hover错乱,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

hover后的效果图:

1:在el-table上加入这三个属性

:row-class-name="rowClassName"

        @cell-mouse-enter="handleMouseEnter"

      @cell-mouse-leave="handleMouseLeave"
2:data里声明一个变量 hoverRowLike:-1

3:copy到method里面  (把sn换成合并单元格里面的一个相同的元素,就是根据什么去合并的)
举个例子假设你的是这样的数据
[sn:"123131",age:"2"],
[sn:"123131",age:"3"],
[sn:"1231322",age:"3"],
[sn:"123132211",age:"3"],

// 鼠标进入单元格,记录下当前行的like

    handleMouseEnter(row, column, cell, event) {

      // console.log(row);

        this.hoverRowLike = row.sn;

    },

    // 给相同like的row添加类名

    rowClassName({ row, rowIndex }) {

      if (row.sn === this.hoverRowLike) {

        return 'hover-row';

      }

    },

    // 鼠标离开

    handleMouseLeave(row, column, cell, event) {

      this.hoverRowLike = -1;

    },

这篇关于el-table 合并单元格后 hover错乱的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

hdu2241(二分+合并数组)

题意:判断是否存在a+b+c = x,a,b,c分别属于集合A,B,C 如果用暴力会超时,所以这里用到了数组合并,将b,c数组合并成d,d数组存的是b,c数组元素的和,然后对d数组进行二分就可以了 代码如下(附注释): #include<iostream>#include<algorithm>#include<cstring>#include<stack>#include<que

day-51 合并零之间的节点

思路 直接遍历链表即可,遇到val=0跳过,val非零则加在一起,最后返回即可 解题过程 返回链表可以有头结点,方便插入,返回head.next Code /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode() {}*

【每日一题】LeetCode 2181.合并零之间的节点(链表、模拟)

【每日一题】LeetCode 2181.合并零之间的节点(链表、模拟) 题目描述 给定一个链表,链表中的每个节点代表一个整数。链表中的整数由 0 分隔开,表示不同的区间。链表的开始和结束节点的值都为 0。任务是将每两个相邻的 0 之间的所有节点合并成一个节点,新节点的值为原区间内所有节点值的和。合并后,需要移除所有的 0,并返回修改后的链表头节点。 思路分析 初始化:创建一个虚拟头节点

vue2实践:el-table实现由用户自己控制行数的动态表格

需求 项目中需要提供一个动态表单,如图: 当我点击添加时,便添加一行;点击右边的删除时,便删除这一行。 至少要有一行数据,但是没有上限。 思路 这种每一行的数据固定,但是不定行数的,很容易想到使用el-table来实现,它可以循环读取:data所绑定的数组,来生成行数据,不同的是: 1、table里面的每一个cell,需要放置一个input来支持用户编辑。 2、最后一列放置两个b

【Python从入门到进阶】64、Pandas如何实现数据的Concat合并

接上篇《63.Pandas如何实现数据的Merge》 上一篇我们学习了Pandas如何实现数据的Merge,本篇我们来继续学习Pandas如何实现数据的Concat合并。 一、引言 在数据处理过程中,经常需要将多个数据集合并为一个统一的数据集,以便进行进一步的分析或建模。这种需求在多种场景下都非常常见,比如合并不同来源的数据集以获取更全面的信息、将时间序列数据按时间顺序拼接起来以观察长期趋势等

如何在Excel中根据单元格内容作MSnbsp;…

上篇文章,我们介绍了INDEX+SMALL+IF+ROW的数组公式组合,也就是说只要在IF中通过条件的构造,基本上就可以想提取什么条件的数据都可以,数据查询肯定得心应手。 但是,我们一起强调函数公式不是万能的,尤其是数组公式在海量数据面前,既是软肋也是硬伤,而且构造这个函数组合还需要你要具备或者能理解简单数组公式逻辑,对于在函数公式方面没有深究的人,自然是一头雾水。当然,就像“数据透视表”一样,

搜狗浏览器打开CSDN博客排版错乱问题解决

之前发生过几次,不知道什么原因。 今天一直用着好好的,打开一个csdn连接,显示404,博文被删除了,于是就用百度快照打开试试,百度快照打开显示的排版很乱也没找到有用信息。 后面再浏览CSDN博客就排版错乱,显示一个大大二维码图片。 尝试删除IE缓存无效,使用谷歌浏览是好的。 基本锁定就是搜狗缓存导致的,于是找如何删除搜狗缓存   清除后恢复正常

jqgrid设置单元格可编辑

1 在单元格的属性列设置为editable。 2 点击编辑按钮的时候,触发某一行设置为edit的状态。 jQuery("#rowed4").jqGrid({url:'server.php?q=2',datatype: "json",colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],colModel

线性表中顺序表的合并

对两个顺序表进行合并,算法的复杂度为O(La.size+Lb.size)。 已知: 顺序线性表La和Lb的元素按值非递减排列 归并La和Lb得到的顺序线性表Lc,Lc的元素也按值非递减排列。 代码定义: void mergeList(SeqList *La,SeqList *Lb,SeqList *Lc){Lc->capacity = La->size + Lb->size;Lc->b

为libpng不同架构创建构建目录、编译、安装以及合并库文件的所有步骤。

好的。既然你已经有了 libpng 的源代码,并且当前处在它的目录下,我们可以简化脚本,不再需要下载和解压源代码这一步。以下是修改后的脚本:```sh#!/bin/bash# 当前目录即 libpng 源代码目录LIBPNG_SRC_DIR=$(pwd)# 设置工作目录WORK_DIR=$(pwd)/libpng_buildBUILD_DIR_X86_64="$WORK_DIR/build