element-ui中table 去掉表头、去掉边框线、去掉鼠标悬停背景颜色

首先去掉表头

**:show-header=“false”**就可以去掉表头

<el-table
      :data="dataList"
      border
      :show-header="false"
      v-loading="dataListLoading"
      style="width: 100%;">
     </el-table>

去掉边框

先去掉border属性
然后增加css

<el-table
      :data="dataList"
      class="customer-no-border-table"
      :show-header="false"
      v-loading="dataListLoading"
      style="width: 100%;">
     </el-table>
/*去掉表格单元格边框*/
  .customer-no-border-table th{
    border:none;
  }
  .customer-no-border-table td,.customer-no-border-table th.is-leaf {
    border:none;
  }
  /*表格最外边框*/
  .customer-no-border-table .el-table--border, .el-table--group{
    border: none;
  }
  /*头部边框*/
  .customer-no-border-table thead tr th.is-leaf{
    border: 0px solid #EBEEF5;
    border-right: none;
  }
  .customer-no-border-table thead tr th:nth-last-of-type(2){
    border-right: 0px solid #EBEEF5;
  }
  /*表格最外层边框-底部边框*/
  .customer-no-border-table .el-table--border::after,.customer-no-border-table .el-table--group::after{
    width: 0;
  }
  .customer-no-border-table::before{
    width: 0;
  }
  .customer-no-border-table .el-table__fixed-right::before,.el-table__fixed::before{
    width: 0;
  }
  .customer-no-border-table .el-table__header tr th{
    background: #fff;
    color: #333333 ;
    padding: 3px ;
    fontWeight: 550 ;
    height: 36px ;
    border: 0px;
    font-size: 15px;
  }
  /*去掉鼠标悬停背景颜色*/
  .el-table tbody tr:hover>td {
    background-color:#ffffff!important
  }
  • 3
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值