为table添加滚动条

说明:在table外加个div,然后再设置div和table的高度。最后,再给div加个overflow:scroll(横向滚动条为overflow-x:scroll;竖向滚动条为overflow-y:scroll)。

添加竖向滚动条代码示例:

<div class="tableDiv">
	<table class="table table-bordered table-hover table-striped  text-center">
		<thead>
			<tr>
				<th>预约人</th>
				<th>预约日期</th>
				<th>预约时间</th>
				<th>下车地点</th>
			</tr>
		</thead>
		<tbody></tbody>
	</table>
</div> 
.tableDiv{
	height:300px;
	overflow-y:scroll;
}
页面效果展示:



### 实现 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` 属性**以激活滚动机制; - **定制化滚动条样式**提升用户体验; - **修复潜在的视觉缺陷**(如头部间隙)优化界面表现; - 结合前端框架特性灵活运用工具链完善交互细节。 ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值