el-table让选中的行变色,几种情况

转自:点击《el-table》让选中的行变色,亲测实用_怎么实现网页表格的某一行点击后变颜色_0.活在风浪里的博客-CSDN博客

设置点击某一行,改行背景色改变:

给el-table设置 highlight-current-row属性

在style中设置选中行的颜色

 /* 用来设置当前页面element全局table 选中某行时的背景色*/
  .el-table__body tr.current-row>td{
    background-color: #ff784a !important;
     color: #fff;
  }

设置鼠标移上行的背景色:


// 修改鼠标经过表格的颜色
/deep/ .el-table tbody tr:hover > td {
  // background-color: rebeccapurple !important;
  // color: #ffffff;
 
  // 可以选择隐藏
  background-color: transparent !important

}

::v-deep .el-table__body tr:hover > td {
background-color: #cd9f9f!important;
color: #ffffff;
}

点击某一事件表格背景色变化

比如点击行内的编辑按钮时,背景色变化;而我单独点击行时,背景色不变化;

给编辑按钮添加点击事件,存储当前编辑的行。

给表格绑定row-style属性

row-style="isRed" 

 

还有一些其他的选中行操作:

https://www.cnblogs.com/Amerys/p/14688342.html

element ui表格多选修改背景色_elementui表单多选选中项背景色_路边蹲着看美女的博客-CSDN博客

https://blog.csdn.net/luoxuebinfei/article/details/123366501

注意:toggleRowSelection如果没有第二个参数,则点击行 复选框选中,再次点击复选框不被选中。如果有第二个参数为true, 则无论点击多少次,复选框均为选中状态

  • 7
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值