el-table去表格边框（vue element-ui ）

梁小茹

于 2021-06-24 13:46:07 发布

阅读量5.4k

点赞数 1

本文链接：https://blog.youkuaiyun.com/weixin_46653486/article/details/118186424

版权

本文介绍了如何在Vue应用中使用Element-UI组件库时，通过代码实现el-table表格边框的移除，帮助读者理解并掌握这一设置技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

话不多说直接上代码

        // 去掉表格单元格边框
        .customer-table th {
          border: none;
        }
        .customer-table td,
        .customer-table th.is-leaf {
          border: none;
        }
        // 表格最外边框
        .el-table--border,
        .el-table--group {
          border: none;
        }
        // 头部边框
        .customer-table thead tr th.is-leaf {
          // border: 1px solid #ebeef5;
          border-right: none;
        }
        .customer-table thead tr th:nth-last-of-type(2) {
          border-right: 1px solid #ebeef5;
        }
        // 表格最外层边框-底部边框
        .el-table--border::after,
        .el-table--group::after {
          width: 0;
        }
        .customer-table::before {
          width: 0;
        }
        .customer-table .el-table__fixed-right::before,
        .el-table__fixed::before {
          width: 0;
        }
        // 表格有滚动时表格头边框
        // .el-table--border th.gutter:last-of-type {
        //   border: 1px solid #ebeef5;
        //   border-left: none;
        // }