使用el-table组件拖拽时， 想使用自定义样式进行拖拽, 想去掉外边框， 并在表头加入竖杠样式

css代码：

1. <style lang="less" scoped>
   
2. // 表格右边框线
   
3. .el-table--border::after {
   
4.   width: 0;
   
5. }
   
6. // 表格上边框线
   
7. :deep(.el-table__inner-wrapper::after) {
   
8.   height: 0 !important;
   
9. }
   
10. // 表格左边框线
    
11. .el-table::before {
    
12.   width: 0 !important;
    
13. }
    
14. :deep(.el-table__border-left-patch) {
    
15.   background: transparent !important;
    
16. }
    
17. </style>
    
18. <style lang="less">
    
19. // 去掉中间线
    
20. .el-table--border .el-table__cell {
    
21.   border-right: 1px solid transparent;
    
22. }
    
23. </style>

复制代码

表头加竖线：

1. .el-table__header {
   
2.   .cell {
   
3.     position: relative;
   
4.     &:after {
   
5.       content: '';
   
6.       position: absolute;
   
7.       right: 0;
   
8.       top: 50%;
   
9.       transform: translateY(-50%);
   
10.       width: 1px;
    
11.       height: 16px;
    
12.       background: #dde2e9;
    
13.     }
    
14.   }
    
15.   .el-table__cell {
    
16.     &:last-child {
    
17.       .cell:after {
    
18.         width: 0;
    
19.       }
    
20.     }
    
21.   }
    
22. }

复制代码

到此这篇关于Element Plus 去掉表格外边框的实现代码的文章就介绍到这了,更多相关Element Plus 表格外边框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源：https://www.jb51.net/javascript/339556jlk.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！