table添加垂直滚动条

转载用css 给tbody加垂直滚动条

思路

  1. 把tbody设置成display:block,然后就对其高度设置一个固定值,overflow设置成auto。
  2. 把thead的tr设置成display:block。
  3. 因为都设置成block所以要给td手动添加宽度
<table class="layui-table">
	<thead>
		<tr style="display:block;">
			<th style="width:20%"></th>
			<!-- 其他列 -->
		</tr>
	</thead>
	<tbody style="display:block; overflow: auto; height:350px">
		<tr>
			<td style="width:20%"></td>
			<!-- 其他列 -->
		</tr>
	</tbody>
</table>
### 实现 Element UI 的 `el-table` 组件纵向滚动条 为了在 `el-table` 中实现纵向滚动条功能,可以通过多种方式配置和调整样式来满足需求。以下是详细的说明: #### 1. 设置表格高度并启用滚动条 通过设置 `height` 属性可以限定表格的高度,当数据超出该高度时会自动触发垂直滚动条[^1]。 ```html <el-table :data="dataList" height="400" style="width: 100%;"> </el-table> ``` 上述代码中,`height="400"` 表示将表格的最大高度设定为 400 像素。如果表格的数据量超出了这一范围,则会出现纵向滚动条。 --- #### 2. 自定义滚动条样式 默认情况下,浏览器自带的滚动条可能不符合设计风格的需求。可以通过 CSS 修改 `.el-table__body-wrapper` 的滚动条样式[^2]。 ```css /* 定义滚动条整体宽度 */ /deep/ .el-table__body-wrapper::-webkit-scrollbar { width: 8px; } /* 定义滑动轨道颜色 */ /deep/ .el-table__body-wrapper::-webkit-scrollbar-track { background-color: #f5f5f5; } /* 定义滑块的颜色和圆角 */ /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 4px; } ``` 以上代码实现了对滚动条样式的完全控制,包括宽度、背景色以及滑块的设计。 --- #### 3. 解决滚动条上方空白问题 有时,在设置滚动条之后可能会发现其顶部存在一定的空白区域,这通常是由表头 gutter 元素引起的。解决方法是对 `.el-table th.gutter` 进行样式覆盖[^3]。 ```css .el-table th.gutter { display: table-cell !important; height: 32px; background: rgba(240, 240, 240, 1); border-bottom: 1px solid #bbb !important; position: absolute; right: 0; top: 0; } ``` 这段代码的作用是重新定位 gutter 元素的位置,并确保它能够正确遮挡下方的内容。 --- #### 4. 使用动态计算高度的方式 对于某些场景下需要动态调整表格高度的情况,可以在 JavaScript 中调用 `$nextTick` 方法配合自定义函数完成操作。 ```javascript this.$refs["singleTable"].$nextTick(() => { this.scrollY(".el-table__body-wrapper", ".el-table__header-wrapper"); }); ``` 这里的 `scrollY` 函数可以根据实际业务逻辑进一步封装,用于处理复杂的滚动行为。 --- #### 5. 固定高度并通过 SCSS 控制滚动效果 另一种常见的做法是在 SCSS 文件中直接指定 `.el-table__body-wrapper` 的高度属性,并开启溢出模式[^4]。 ```scss /deep/ .el-table__body-wrapper { height: 135px !important; /* 调整为适合页面布局的高度 */ overflow-y: scroll; &::-webkit-scrollbar { width: 0; /* 如果不需要可见滚动条,可以直接隐藏 */ } } ``` 这种方式适用于那些希望保持简洁外观的应用程序。 --- ### 总结 综上所述,要在 `el-table` 中实现纵向滚动条功能,主要涉及以下几个方面: - **设置固定的 `height` 属性**以激活滚动机制; - **定制化滚动条样式**提升用户体验; - **修复潜在的视觉缺陷**(如头部间隙)优化界面表现; - 结合前端框架特性灵活运用工具链完善交互细节。 ---
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值