el-table指定行背景颜色更换,并且鼠标移入后行背景色保持不变

思路:通过设置:row-class-name="tableRowClassName"  和  :cell-style="tableCellstyle"

1、设置行变色

<el-table       
             :data="dataList"        
              :row-class-name="tableRowClassName"
              :cell-style="tableCellstyle"
 >

methods中写方法:

  tableRowClassName(row, rowIndex ) {
      if (row.row.name == 'test') {
        return 'rowColor'
      }
      return ''
 },

 

style中设置class属性:

::v-deep .el-table .rowColor{
    background: #f3c298;
}

 

2、置好背景色后发现,每次鼠标移入到变色的行上面,背景色就会变成灰色,要求是移入后也应该是变过色的背景色

  tableCellstyle(row, rowIndex) {
      if (row.row.name == 'test') {
        return 'background:  #f3c298'
      }
      return ''
 },

 

posted @   Evident  阅读(4587)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
点击右上角即可分享
微信分享提示