ElementUI：el-table去除外边框

原创已于 2025-01-08 00:31:29 修改 · 605 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #前端

于 2025-01-08 00:30:40 首次发布

前端专栏收录该内容

182 篇文章

订阅专栏

<el-table
  :data="data" 
  style="width: 100%"
  class="custom-no-border" 
  @selection-change="handleChange">
   <el-table-column type="selection" width="55"></el-table-column>
    
</el-table>

.custom-no-border-table th{
 border:none;
}

.custom-no-border-table td,.customer-no-border-table th.is-leaf {
  border:none;
}

.custom-no-border-table .el-table--border, .el-table--group{
  border: none;
}

.custom-no-border-table thead tr th.is-leaf{
  border: 0px solid #EBEEF5;
  border-right: none;
}

.custom-no-border-table thead tr th:nth-last-of-type(2){
  border-right: 0px solid #EBEEF5;
}

.custom-no-border-table .el-table--border::after,.customer-no-border-table .el-table--group::after{
     width: 0;
}

.custom-no-border-table::before{
  width: 0;
}

.custom-no-border-table .el-table__fixed-right::before,.el-table__fixed::before{
  width: 0;
}

.custom-no-border-table .el-table__header tr th{
  background: #fff;
  color: #333333 ;
  padding: 3px ;
  fontWeight: 550 ;
  height: 36px ;
  border: 0px;
  font-size: 15px;
}

::v-deep .el-table th.el-table__cell.is-leaf,
    ::v-deep .el-table td.el-table__cell {
       border: 0px solid #ebeef5;
}