vue + element 取消表格背景 不固定列

<template>
  <div class="t_btn2">
      <el-table :data="tableData1" border stripe>
          <el-table-column v-for="(item, index) in tableCols1" :key="index" :prop="item.name" :label="item.label" :width="item.width"></el-table-column>
      </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData1: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
      tableCols1: [
        {
          name: 'date',
          label: '日期',
          width: 180
        },
        {
          name: 'name',
          label: '姓名',
          width: 180
        },
        {
          name: 'address',
          label: '地址',
          width: 280
        }
      ]
    }
  }
}
</script>

<style lang="css" scoped>
    .t_btn2 /deep/  .el-table, .el-table__expanded-cell {
        background-color: transparent;
    }
    .t_btn2 /deep/ .el-table tr {
        background-color: transparent!important;
        color: #ffffff;
    }
    .t_btn2 /deep/  .el-table--enable-row-transition .el-table__body td, .el-table .cell{
        background-color: transparent;
        
    }
    .t_btn2 /deep/  .el-table__fixed-right::before, .el-table__fixed::before{
        background-color: transparent;
    }
    .t_btn2 /deep/  .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
        border-bottom:none;
    }
    .t_btn2 /deep/  .el-table__row>td{
        border: none;
    }
    /* 清除底部横线 */
    .el-table::before {
        height: 0px;
    }

    .t_btn2 /deep/ .el-table tr {
        background-color: transparent !important;
        color: #ffffff;
    }

    ::v-deep  .el-table tbody tr:hover > td {
        background-color: #ffffff00 !important;
    }
</style>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值