Element Plus 去掉表格外边框的实现代码
更新时间：2025年04月14日 10:42:18 作者：意桉
使用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 表格外边框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
最近开发有个需求需要酷炫的文字滚动效果，发现vue2版本的CountTo组件不适用与Vue3,没有轮子咋办，那咱造一个呗，感兴趣的小伙伴可以跟随小编一起了解一下2022-11-11
这篇文章主要介绍了前端vue如何使用高德地图，帮助大家利用vue调用其他key，完成需求，感兴趣的朋友可以了解下2020-11-11
这篇文章主要介绍了vue中el-upload上传图片到七牛的示例代码,实现思路其实也很简单，需要从后台获取七牛token上传图片到七牛，具体示例代码大家跟随小编一起学习吧2018-10-10
这篇文章主要介绍了Vue-Router在Vue2和Vue3中的使用,本文通过示例代码给大家介绍的非常详细，需要的朋友可以参考下2023-06-06
这篇文章主要介绍了vue代码分割的实现(codesplit)，做了代码分割后，会将代码分离到不同的bundle中，然后进行按需加载这些文件，需要的朋友可以参考下2018-11-11
这篇文章主要介绍了vue slot与传参实例代码讲解，在文章末尾给大家介绍了vue 利用slot向父组件传值的方法,需要的朋友可以参考下2019-04-04
这篇文章主要介绍了Vue使用lodop打印小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
这篇文章主要介绍了vue项目Luckysheet的使用,目前Luckysheet不支持使用npm安装包，所以只能使用CDN引入依赖，在vue项目的public/index.html文件里引入即可，本文通过示例代码给大家详细介绍，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了vue中将html字符串转换成html后遇到的问题小结,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-12-12
这篇文章主要介绍了Vue实现仿iPhone悬浮球的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
最新评论