element-table中当点击row的时候背景色发生

2023-11-06

效果图: 

 当点击行的时候,则背景添加颜色,再次点击则颜色去掉

1.在el-table标签中添加:row-click和row-style事件

 

 @row-click="tableClick" :row-style="isActive"
    tableClick(row) {
      if(this.rowAcitve.length == 0) {
        this.rowAcitve.push(row)
      }else {
        for(const index in this.rowAcitve) {
          if(this.rowAcitve[index].id == row.id) {
            this.rowAcitve.splice(index, 1)
          }else {
            this.rowAcitve.push(row)
          }
        }
      }
    },
    isActive({row}) {
      const checkIdList = this.rowAcitve.map((item) => item.id);
      if (checkIdList.includes(row.id)) {
        return {
          backgroundColor: "#96c7d2",
        };
      }
    }

 row-click:用于保存点击行的数据,并且用于判断rowAcitive中是否已经保存的行数据,如果有则删除。用于实现——当点击行的时候,则背景添加颜色,再次点击则颜色去掉

row-style:用于改变行的背景颜色

 

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

element-table中当点击row的时候背景色发生 的相关文章

随机推荐

  • java中怎么比较两个自定义实体对象是否相等(比如在Set数据结构中去重)

    需求 有一个类Person 需要判断Account类的对象account1 account2是否相等 判断规则为 当id int类型判断是否带下相等 和department 判断字符串内容是否相等 属性均相等时 默认两个属性都必须非空 若有
  • C语言:合并两个有序数列,并保持有序性。

    C语言 合并两个有序数组 并保持有序性 include
  • 超详细 Windows 安装 PyTorch 步骤+ conda 常用命令

    目录 配置 PyTorch 安装环境 下载安装 Ananconda 创建 PyTorch 安装环境 conda 常用命令 安装 PyTorch 说在前面 安装非 GPU 版本的 PyTorch 安装 GPU 版本 PyTorch 检查 CU
  • [管理与领导-61]:IT基层管理者 - 潜技能 - 1 - 职场中的陷阱- 职场中常见的陷阱与应对措施

    目录 一 常见陷阱 二 应对措施 一 常见陷阱 在职场中 有许多常见的陷阱 下面是一些例子 过度承诺和无法有效管理时间 在职场中 很容易迫于压力而承诺过多的事情 导致时间管理困难和任务完成的延误 这可能导致质量下降 工作生活平衡失衡 甚至疲
  • spring cache设置指定Key过期时间

    今天是2019年最后一天 回想年初立下的小目标 貌似都完成的不理想 还得继续努力啊 生活还在继续 加油 最近刚好在使用spring cache做缓存的时候 有需要针对不同的key设置过期时间的场景 找了下资料 实现这个功能 做个总结 spr
  • Ubuntu中报错:failed to create hard link

    1 完整报错打印 上面是我在编译jpg图片的解码库时遇到的报错 报错原因显示创建硬链接失败 不允许创建硬链接 2 报错原因分析 1 我是在Ubuntu和Windows的共享文件夹目录中编译程序 共享目录是Ubuntu和Windows共享的
  • 使用gpg密钥验证github提交

    git是现在最流行的版本控制工具 而且它确实功能很强大 在使用git之前 首先要设置用户名和电子邮箱两个参数 可能有人会有疑问 假如两个不同的人使用相同的用户名和电子邮箱进行提交 会怎么样呢 答案是可以的 git本身无法判断 所以会把这两个
  • C++ 单元测试与代码覆盖率测试方法

    前言 测试是软件开发过程中一个必须的环节 测试确保软件的质量符合预期 对于工程师自己来说 单元测试也是提升自信心的一种方式 直接交付没有经过测试的代码是不太好的 因为这很可能会浪费整个团队的时间 在一些原本早期就可以发现的问题上 而单元测试
  • Shell脚本攻略:文本三剑客之awk

    目录 一 理论 1 awk原理 2 awk打印 3 awk条件判断 4 awk数组与循环 5 awk函数 6 常用命令 二 实验 1 统计磁盘可用容量 2 统计 etc下文件总大小 3 CPU使用率 4 统计内存 5 监控硬盘 一 理论 1
  • 异步赠书:AI专栏(AI圣经!《深度学习》中文版)

    最新活动 邀请10名好友关注微信公众号 异步图书 10天 即可获得异步图书一本 点击立即参与活动 今天小编开启了大咖重磅新书赠送活动 如果你热爱读书 热爱技术 参与到异步赠书活动中来 都有机会得到新书中的一本哦 本次活动已结束 没有抢到 深
  • poj 1852 Ants

    题意 在一个管子里面有一些蚂蚁 他们按照初始的方向走 遇到蚂蚁后就掉头 问最少经过多长的时间 他们都已经走出了管子 这道题目想到了会很简单没想到会很纠结 提示 他们相遇的时候假设他们穿过了对方的身体 代码 include
  • AD利用嘉立创的封装

    1 首先 打开元件库 搜索元器件 2 点开它的封装 符号 3 文件 gt 导出 gt Altium Designer 4 然后在AD上面打开这个文件 5 将其复制 粘贴放到PCB库中 6 然后在原理图中的封装管理器中 添加封装 管脚映射修改
  • BAT紧盯,汽车后市场的优质资产还有谁?

    巨头的一举一动 都是各方焦点 最近阿里与汽车超人 康众汽配的联手 一方面说明汽车后市场这块肥肉巨头紧盯 潜力仍待挖掘 另一方面也说明 仅拥有资本 用户 供应链在这个行业并不一定能走下去 加码行业垂直资源 合纵连横 资源互补或许才是出路 01
  • React多页面应用5(webpack4 多页面自动化生成多入口文件)

    本教程总共9篇 每日更新一篇 请关注我们 你可以进入历史消息查看以往文章 也敬请期待我们的新文章 1 React多页面应用1 webpack4 开发环境搭建 包括热更新 api转发等 2018 04 04 2 React多页面应用2 web
  • 基于Springboot+SpringCloud 的微服务架构脚手架,接私活很丝滑(附源码)

    点击关注 武哥聊编程 2022 02 24 08 50 收录于话题 项目开发26个 大家好 我是武哥 今天给大家推荐一个牛逼的接私活项目 SpringCloud微服务架构项目 一个由商业级项目升级优化而来的微服务架构 采用SpringBoo
  • ctfshow web4

    本次解法使用工具 burpsuite和中国蚁剑 这是web3的进化版 老的方法已经行不通 了 只能通过日志注入得到shell 这里我们输入默认目录获取日志 url var log nginx access log 之后就得到了日志文件 接下
  • 【Python 3.7】将点数相乘:同时掷两个骰子时,通常将它们的点数相加。请通过可视化展 示将两个骰子的点数相乘的结果。

    Python 3 7 将点数相乘 同时掷两个骰子时 通常将它们的点数相加 请通过可视化展 示将两个骰子的点数相乘的结果 其中die py文件中的程序为 from random import randint class Die 表示一个骰子的
  • 在unicode环境下将CString类型转换成char

    原帖地址 http hi baidu com sqhily2008 blog item e38834fcaf105d0d09244d83 html 在Visual C NET2005中 默认的字符集形式是Unicode 但在VC6 0等工程
  • 自己动手绕线圈电感详细计算公式

    加载其电感量按下式计算 线圈公式 阻抗 ohm 23 14159F 工作频率 电感量 mH 设定需用360ohm阻抗 因此 电感量 mH 阻抗 ohm 23 14159 F 工作频率 360 23 14159 7 06 8 116mH 据此
  • element-table中当点击row的时候背景色发生

    效果图 当点击行的时候 则背景添加颜色 再次点击则颜色去掉 1 在el table标签中添加 row click和row style事件 row click tableClick row style isActive tableClick