vue+elementui table表格无背景效果

最新推荐文章于 2024-01-19 12:20:54 发布

yurisa139

最新推荐文章于 2024-01-19 12:20:54 发布

阅读量618

点赞数

分类专栏： js vue 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/yurisa1994/article/details/125098215

版权

js 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

vue

14 篇文章 0 订阅

订阅专栏

效果

在这里插入图片描述

template部分

			<el-table
            :header-cell-style="{
              backgroundColor: 'transparent',
              color: '#ffffff',
              fontSize: fontSize(12),
              textAlign: 'center'
            }"
            :cell-style="{
              color: '#fff',
              backgroundColor: 'transparent',
              fontSize: fontSize(8),
              textAlign: 'center'
            }"
            :row-style="{
              color: '#fff',
              backgroundColor: 'transparent',
              fontSize: fontSize(8),
              textAlign: 'center'
            }"
            :data="projectTableData"
            style="width: 100%"
          >
            <el-table-column prop="cat" label="分类"> </el-table-column>
            <el-table-column label="2022">
              <el-table-column prop="num2022" label="数量" width="60">
              </el-table-column>
              <el-table-column prop="jine2022" label="金额" width="60">
              </el-table-column>
            </el-table-column>
          </el-table>

css部分

      // .t_btn2为你的上级父元素class名称
      // 由于是只在本页面修改, 所以必须要用 /deep/ 或者 >>> 才能生效  /deep/ 是深度选择器,可自行百度了解更多
      .t_btn2 /deep/ .el-table,
      .el-table__expanded-cell {
        background-color: transparent;
      }
      .t_btn2 /deep/ .el-table tr {
        background-color: transparent !important;
      }
      .t_btn2 /deep/ .el-table--enable-row-transition .el-table__body td,
      .el-table .cell {
        padding: 0;
        background-color: transparent;
      }
      // .t_btn2 /deep/ .el-table__row > td {
      //   border: none;
      // }
      /* 清除底部横线 */
      .el-table::before {
        height: 0px;
      }