Element Plus 去掉表格外边框的实现代码
作者:意桉
使用el-table组件拖拽时, 想使用自定义样式进行拖拽, 想去掉外边框, 并在表头加入竖杠样式,本文给大家介绍Element Plus 去掉表格外边框的实现代码,感兴趣的朋友一起看看吧
使用el-table组件拖拽时, 想使用自定义样式进行拖拽, 想去掉外边框, 并在表头加入竖杠样式
css代码:
<style lang="less" scoped> // 表格右边框线 .el-table--border::after { width: 0; } // 表格上边框线 :deep(.el-table__inner-wrapper::after) { height: 0 !important; } // 表格左边框线 .el-table::before { width: 0 !important; } :deep(.el-table__border-left-patch) { background: transparent !important; } </style> <style lang="less"> // 去掉中间线 .el-table--border .el-table__cell { border-right: 1px solid transparent; } </style>
表头加竖线:
.el-table__header { .cell { position: relative; &:after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 16px; background: #dde2e9; } } .el-table__cell { &:last-child { .cell:after { width: 0; } } } }
到此这篇关于Element Plus 去掉表格外边框的实现代码的文章就介绍到这了,更多相关Element Plus 表格外边框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!