Element Plus 去掉表格外边框的实现代码
使用el-table组件拖拽时, 想使用自定义样式进行拖拽, 想去掉外边框, 并在表头加入竖杠样式
css代码:
<style 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>
// 去掉中间线
.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;
}
}
}
}上一篇:前端请求全面解析之AJAX、Axios 与 Fetch的使用详解与代码示例
栏 目:JavaScript
本文标题:Element Plus 去掉表格外边框的实现代码
本文地址:https://www.fushidao.cc/wangluobiancheng/23731.html
您可能感兴趣的文章
- 02-04javascript解码揭秘,JavaScript核心原理及高效编码技巧之谜?
- 02-04javascript电子书涵盖哪些编程技巧与实战案例,适合哪些开发者阅读?
- 02-04JavaScript如何高效操作javascript二维数组的元素和方法选择?
- 02-04JavaScript全局变量如何影响代码的模块化和性能优化?
- 02-04javascript赋值
- 02-04a标签javascript如何正确运用和优化?探讨技巧与最佳实践疑问长尾标题
- 02-04javascript设计
- 02-04JavaScript翻译中的常见难点和高效策略探讨?
- 02-04javascript变量名
- 02-04JavaScript隐藏技巧,揭秘30种不为人知的隐藏方法之谜?

