改变el-table样式

最新推荐文章于 2024-09-05 08:55:06 发布

Humor_L

最新推荐文章于 2024-09-05 08:55:06 发布

阅读量911

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/Humor_L/article/details/128573291

版权

这篇文章介绍了如何在Vue.js的El-Table组件中自定义样式和交互行为。包括改变鼠标悬停表格行的背景颜色、固定列的特殊处理、表头背景的修改以及行背景的动态调整。方法涉及到CSS选择器、row-class-name和cell-mouse事件处理。

摘要由CSDN通过智能技术生成

1、改变鼠标进入表格悬浮时颜色

/deep/ .el-table__body tr:hover>td{
  background-color: #39fcff;
}

一般情况下这个方法可以解决问题，如果不想影响所有表格给el-table 一个class名。

2、固定了右列并且表格单独有特殊色处理

a.有使用到特殊行颜色不同的处理，这个挺容易实现的(ps:如有不懂可以看一下官方文档-带状态表格)
/ / html

//html 
<el-table :row-class-name="tableRovClassName"></el-table>

// js
methods: {
    tableRowC1assName({row,rowIndex}){
        if (row.deployStatus ==O){
            return "warning-row"
        }else {
            return '';
        }
    }
}

b.灵活使用ecell-mouse-enter和ecell-mouse-leave(ps:如有不懂可以看一下官方文档-事件处理)

// html
<el-table
: row-class-name="tableRowClassName"
:ce1l-mouse-enter="mouseEnter"
cell-mouse-leave="mouseLeave"></el-table>
// js
methods: {
    mouseEnter(row,column,cell,event){
        官网查方法
    }
}

 //css
.table-hide-color>td{
    background: #fafafa!important;
}
.site-table .el-table_ body tr.hover-row>td{
    background : #fff;
}

3、表头背景修改

使用 :header-cell-style="headerStyle"

headerStyle({row,column,rowIndex, columnIndex}){
      let cellStyle1;
      let cellStyle2;
      let cellStyle3;
      cellStyle1= "color: #fff;background:#027db4"
      if(columnIndex >= 0 && columnIndex < 14 && rowIndex===0){
        return cellStyle1;
      }
    },

4、修改每表格一行背景

使用 :row-class-name="tableRowClassName"

tableRowClassName({row, rowIndex}) {
          if (rowIndex === 0) {
              return 'warning-row';
          } else if (rowIndex === 1) {
              return 'color: #fff;background:#027db4';
          }
          return '';
      },

//css
/deep/ .el-table .warning-row {
      background-color: #027DB4;
      color: #fff;}

/deep/ .el-table .success-row {
        background: #f0f9eb;
    }