From 0f13b47ff3da2487cb67a2ead47fe2b140dbe8b8 Mon Sep 17 00:00:00 2001 From: qiezi <15576055375@163.com> Date: Tue, 29 Apr 2025 14:29:41 +0800 Subject: [PATCH] 20250429 --- .../board/VulcanizationDispatchOrder.vue | 35 +++++++++++++++++-- 1 file changed, 32 insertions(+), 3 deletions(-) diff --git a/src/views/modules/board/VulcanizationDispatchOrder.vue b/src/views/modules/board/VulcanizationDispatchOrder.vue index 4a7c74f..917211b 100644 --- a/src/views/modules/board/VulcanizationDispatchOrder.vue +++ b/src/views/modules/board/VulcanizationDispatchOrder.vue @@ -20,7 +20,7 @@ export default { columnHidden: false, columnImage: false, columnSortable: false, - columnWidth: 38, + columnWidth: 30, format: null, functionId: this.$route.meta.menuId, sortLv: 0, @@ -56,7 +56,7 @@ export default { columnHidden: false, columnImage: false, columnSortable: false, - columnWidth: 100, + columnWidth: 105, format: null, functionId: this.$route.meta.menuId, sortLv: 0, @@ -193,6 +193,7 @@ export default { align: 'center' }, ], + scrollTimer:'', } }, methods:{ @@ -204,7 +205,30 @@ export default { this.dataList = [] this.$message.warning(data.msg) } - } + }, + // 设置自动滚动 + autoScroll(stop) { + 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 + } + }, 150) // 滚动速度 + } + }, }, created() { this.handleQuery(); @@ -212,8 +236,12 @@ export default { this.handleQuery(); },this.setTimeoutDelay) }, + mounted() { + this.autoScroll() + }, destroyed() { clearInterval(this.refreshTool) + this.autoScroll(true) } } @@ -225,6 +253,7 @@ export default { height="100%" :data="dataList" border + ref="scrollTable" style="width: 100%">