vue去掉element表格下边框线

本文介绍了如何在ElementUI2.13.2版本中针对表格进行样式调整,包括移除表头和单元格的下边框,改变最底部边框,以及设置特定背景颜色。

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

1、去掉表头下边框线


::v-deep .is-leaf{
	border-bottom: none !important;
}

2、去掉表格内容下边框线

::v-deep .el-table td, .el-table th.is-leaf {
	border-bottom: none;
}

3、去掉表格最底部的边框线

::v-deep .el-table::before {
    height: 0px;
}

4、更改表头背景颜色

::v-deep .el-table th{
	background-color: #FFFAF5 ;
}

5、更改斑马纹背景颜色

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td{
	background-color: #FFFAF5;
}

ps:element组件库2.13.2,需要局部修改样式添加父级类名

### 修改 Vue2 Element UI 表格固定列滚动条样式 为了改善 Vue2 中使用 Element UI 的表格组件,在添加固定列之后出现的滚动条被遮挡的问题,可以采用以下 CSS 样式调整方法: 对于 Webkit 内核浏览器(如 Chrome 和 Safari),可以通过覆盖默认样式来实现更美观且功能正常的滚动条。具体做法是在项目中的全局样式文件或者相应组件内的 `<style scoped>` 部分加入特定的选择器和属性。 针对 `.el-table` 组件内部结构,特别是带有 `__body-wrapper` 类名的部分负责展示数据行并提供水平/垂直方向上的滚动能力。因此,要定制其滚动条外观,则需定位到该元素下的伪类 `-webkit-scrollbar` 及其子项 `-webkit-scrollbar-thumb` 与 `-webkit-scrollbar-track` 来分别定义滚轮滑块及其轨道的颜色、尺寸等特性[^1]。 ```css /* 调整整个 el-table 下 body wrapper 的滚动条 */ /deep/.el-table { /deep/.el-table__body-wrapper::-webkit-scrollbar { width: 12px; height: 12px; } /deep/.el-table__body-wrapper::-webkit-scrollbar-thumb { background-color: #ccc !important; border-radius: 5px; } /* 确保固定列不会挡住滚动条 */ /deep/.el-table-fixed .el-table__body { padding-bottom: 12px; } } ``` 上述代码片段不仅改变了滚动条的整体视觉效果,还特别处理了由于设置了固定列而导致可能出现的内容重叠现象——即通过给固定的那一部分增加额外的底部填充(`padding-bottom`)使得即使有滚动条存在也不会影响阅读体验[^2]。 此外,如果希望进一步优化跨平台一致性,还可以考虑为 Firefox 浏览器单独指定一套规则,利用标准CSS 属性 `scrollbar-width` 控制宽度以及 `scrollbar-color` 设置颜色对比度;而对于 IE 或 Edge (旧版),则可通过 `-ms-overflow-style:none;` 去除传统风格的滚动条显示[^3]。 最后值得注意的是,以上提到的所有 `/deep/` 操作符仅适用于 Vue CLI 版本低于 4.x 的环境当中,在更高版本里可能已被弃用或替换成了其他机制,请根据实际情况作出适当调整。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值