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

最新推荐文章于 2024-05-06 21:51:47 发布

背书包的甜瓜

最新推荐文章于 2024-05-06 21:51:47 发布

阅读量293

点赞数

分类专栏： Vue 文章标签： Vue.js 表格组件数据绑定动态数据样式定制

本文链接：https://blog.csdn.net/dashanjv/article/details/115507271

版权

Vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<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>