element中table 添加滚动效果

<div class="biaoge biaoge_list " style="width:100%; height:36vh">
					<div class="regional_table">
						<el-table :data="nocompleteList" :max-height="500" ref="scrollTable" style="width: 100%"
							>
							<el-table-column prop="billDate" label="单据日期">
							</el-table-column>
							<el-table-column prop="itemName" label="存货名称">
							</el-table-column>
							<el-table-column prop="techName" label="工序" with="30">
							</el-table-column>
							<el-table-column prop="outNum" label="派工数量" with="30">
							</el-table-column>
							<el-table-column prop="has" label="完工数量" with="30">
							</el-table-column>
						</el-table>
					</div>
                </div>

js方法

mounted(){
    setInterval(() => {
        //滚动方法
        this.autoScroll()
    }60 * 60 * 1000)

}
//离开时销毁
beforeDestroy(){
    this.autoScroll(true)
}
methods:{
    const table = this.$refs.scrollTable
				// 拿到表格中承载数据的div元素
				const divData = table.$refs.bodyWrapper
				// 拿到元素后,对元素进行定时增加距离顶部距离,实现滚动效果(此配置为每100毫秒移动1像素)
				if (stop) {
					//再通过事件监听,监听到 组件销毁 后,再执行关闭计时器。
					// window.clearInterval(this.scrolltimer)
				} else {
					this.scrolltimer = window.setInterval(() => {
						// 元素自增距离顶部1像素
						divData.scrollTop += 1
						// 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
						if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
							// 重置table距离顶部距离
							divData.scrollTop = 0
							// 重置table距离顶部距离。值=(滚动到底部时,距离顶部的大小) - 整个高度/2
							// divData.scrollTop = divData.scrollTop - divData.scrollHeight / 2
						}
					}, 100) // 滚动速度

}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 可以通过设置表格的样式来隐藏滚动条,具体方法如下: 1. 在表格的外层容器上设置样式 overflow: hidden; 2. 在表格的 tbody 上设置样式 overflow-y: scroll; 这样就可以隐藏表格的滚动条了。 ### 回答2: Element UI 是一个基于 Vue.js 的 UI 库,它提供了丰富的组件,包括表格组件。在使用 Element UI 表格组件时,有时候需要隐藏表格的滚动条,这可以通过以下步骤完成: 1. 找到 Element UI 表格组件的容器元素,一般是一个 class 为 el-table 的 div 元素。 2. 在该容器元素的样式设置 overflow 属性为 hidden,这样便可隐藏表格的滚动条。 例如,如果要隐藏 id 为 my-table 的表格组件的滚动条,可以在样式添加如下代码: ```css #my-table .el-table { overflow: hidden; } ``` 这样便可成功地隐藏表格组件的滚动条。 另外,如果想要隐藏表头和表格内容的滚动条,可以将 overflow 属性应用到 el-table__header-wrapper 和 el-table__body-wrapper 元素,例如: ```css #my-table .el-table__header-wrapper, #my-table .el-table__body-wrapper { overflow: hidden; } ``` 这样便可同时隐藏表头和表格内容的滚动条。 总之,Element UI 表格组件的滚动条隐藏,可以通过设置容器元素的 overflow 属性为 hidden 实现。 ### 回答3: 在 Element UI ,我们可以使用 el-table 组件来显示数据表格,而当数据量较大时,就会出现滚动条。如果我们希望隐藏滚动条,可以采取以下方法: 方法1:CSS 样式方式 1.在 el-table 标签上加上 style="overflow:hidden;",这样能够隐去直接展示的滚动条,但是在鼠标滚动滚轮的时候,仍会出现默认的浏览器滚动条,不能达到完全隐藏的效果。 2.给 el-table 标签外层添加一个包裹层,如 <div class="table-wrapper">,并设置其样式为 overflow:hidden;。同时,将 el-table 的高度设置为最大值:max-height: none; height: auto;。这样展示时就能完全隐藏滚动条。 3.但是,由于这种方法需要额外添加包裹层,所以可能会减少页面的美观度,不够简洁。 方法2:JS 方式 1.在页面加载完成后,获取 el-table 的 class 属性,如:let tableClass = document.querySelector('.el-table--scrollable-y'); 2.获取到 class 属性后,为 el-table 隐藏滚动条tableClass.style.overflowY = 'hidden'; 3.但是,使用 JS 方法隐藏滚动条需要在页面加载后再操作,如果操作晚了容易引起页面的闪烁。同时,这种方式虽然能够隐藏滚动条,但是并没有解决滚动的问题,使用鼠标滚轮时仍会触发滚动事件。 总结来说,以上两种方法,CSS 样式方式更为简洁,但是需要额外添加包裹层,而 JS 方式虽然容易实现,但是需要注意操作的时机。在实际开发,可以根据具体需求和场景选择合适的方法来隐藏滚动条

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值