elementUI table 修改表格背景色,去除单元格底部横线

2022-07-26,,,,

想把表格的背景设置成透明的,弄了很长时间表格是透明了,就是单元格横线一直去不掉

原图:

单元格带横线:

最终效果图:

这是实例代码:

  <template>
  <div class="table-wrapper">
    <el-table :data="tableData" style="width: 100%" :show-header="false">
      <el-table-column prop="address" label="网格名"> </el-table-column>
      <el-table-column prop="name" label="头像"> </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="sex" label="性别"> </el-table-column>
    </el-table>
  </div>
</template>

  <script>
export default {
  data() {
    return {
      tableData: [
        {
          sex: "男",
          name: "王小虎",
          address: "浦口区江浦街道",
        },
        {
          sex: "男",
          name: "王小虎",
          address: "浦口区江浦街道",
        },
        {
          sex: "女",
          name: "王小虎",
          address: "浦口区江浦街道",
        },
        {
          sex: "女",
          name: "王小虎",
          address: "浦口区江浦街道",
        },
      ],
    };
  },
};
</script>
<style lang="scss" scoped>
.table-wrapper {
  width: 100%;
}

.table-wrapper ::v-deep .el-table {
  /* 表格字体颜色 */
  color: white;
  /* 表格边框颜色 */
  border: 0.5px solid #fcfcfc00;
  height: 80%;
}

/* 删除表格下横线 */
.table-wrapper ::v-deep .el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}
/* 删除单元格底部横线 */
.table-wrapper ::v-deep .el-table td {
  border-bottom: 0px solid #dfe6ec !important;
}

.table-wrapper ::v-deep .el-table--fit {
  padding: 20px;
}
.table-wrapper ::v-deep .el-table,
.el-table__expanded-cell {
  background-color: transparent;
}

.table-wrapper ::v-deep .el-table tr {
  background-color: transparent !important;
}
.table-wrapper ::v-deep .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
}
</style>

主要是这段样式起作用:

/* 删除单元格底部横线 */
.table-wrapper ::v-deep .el-table td {
  border-bottom: 0px solid #dfe6ec !important;
}

自测有效果,希望对你有参考作用,样式里的.table-wrapper是div的class,这个要看你自己的class是什么。

本文地址:https://blog.csdn.net/qq_41994916/article/details/111136393

《elementUI table 修改表格背景色,去除单元格底部横线.doc》

下载本文的Word格式文档,以方便收藏与打印。