eltble设置能和背景相连的(sao)操作

最新推荐文章于 2024-07-26 10:33:17 发布

原创最新推荐文章于 2024-07-26 10:33:17 发布 · 233 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#eltable中的行和背景相连

el-talbe 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何在Element UI的表格组件中实现压边效果，通过CSS样式调整，确保表格最后一列与背景无缝连接，同时提供了hover和点击激活时的不同样式设置。

先放效果图:
在这里插入图片描述
如图所示:
当激活了当前行,就和背景(也就是左边),看上去连接在一起

思路

1.未hover或click激活的最后一个td,样色都是设置同一个颜色
2.hover时和click激活时,再设置对应的颜色
3.其实最右边的那一列td是固定住的

<el-table :data="list" highlight-current-row @current-change="handleCurrentChange" stripe style="width: 100%" key="0">
  <el-table-column prop="stockbillNo" label="编号" align="center"></el-table-column>
   <el-table-column prop="stockbillDate" label="单据日期" width="100" align="center"></el-table-column>
   <el-table-column prop="supFactryName" label="工厂/供应商"></el-table-column>
   <el-table-column prop="stockbillSttusCode" label="状态" width="140" align="center"></el-table-column>
   <el-table-column prop="date" label="上次入库时间" width="140" align="center"></el-table-column>
   <el-table-column fixed="right" width="10" class-name="table-pin"></el-table-column><-- 就是这里-->
 </el-table>

具体操作

// 表格中有压住的效果
.el-table--striped .el-table__body tr.el-table__row--striped td{
  &.table-pin{
    background-color: #F5F7FA;
    border: 0;
  }
}
.el-table--enable-row-transition .el-table__body td{
  &.table-pin{
    background-color: #F5F7FA;
    border: 0;
  }
}
.inOrdOut .el-table th{
  &.table-pin{
    background-color: #F5F7FA;
    border: 0;
  }
}

// hover
.el-table__body tr.hover-row > td, 
.el-table__body tr.hover-row.current-row > td, 
.el-table__body tr.hover-row.el-table__row--striped > td, 
.el-table__body tr.hover-row.el-table__row--striped.current-row > td{
  background-color: #E4F1F7;
  &.table-pin{
    background-color: #E4F1F7;
    border: 0;
  }
}
// click激活的
.el-table__body tr.current-row > td{
  background-color: #E4F1F7;
  &.table-pin{
    background-color: #E4F1F7;
    border: 0;
  }
}
// click激活的
.el-table--striped .el-table__body tr.el-table__row--striped.current-row td{
  background-color: #E4F1F7;
  &.table-pin{
    background-color: #E4F1F7;
    border: 0;
  }
}

大功告成!!!