From 9ab38c6d8f60997d1c73c6de1ab0924345ffd5de Mon Sep 17 00:00:00 2001
From: zhangrenyuan <18990852002@163.com>
Date: Thu, 12 Feb 2026 09:47:15 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E8=A1=A8=E6=A0=BC-=E6=B6=88=E8=80=97?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86):=20=E6=90=9C=E7=B4=A2=E5=90=8E=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E8=87=AA=E5=8A=A8=E6=BB=9A=E5=8A=A8=E5=88=B0=E9=A1=B6?=
 =?UTF-8?q?=E9=83=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在四个消费明细页面中，为el-table添加ref引用
- 引入nextTick确保DOM更新后执行滚动操作
- 添加scrollTableTop函数调用表格的setScrollTop方法
- 在每次搜索查询数据更新后自动将表格滚动到顶部位置
---
 src/views/consume/bean/articleVideo.vue      | 10 ++++++++--
 src/views/consume/bean/dieHardFan.vue        | 10 ++++++++--
 src/views/consume/bean/liveStream.vue        | 10 ++++++++--
 src/views/consume/gold/coinConsumeDetail.vue | 10 ++++++++--
 4 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/src/views/consume/bean/articleVideo.vue b/src/views/consume/bean/articleVideo.vue
index 9966096..a4ac29e 100644
--- a/src/views/consume/bean/articleVideo.vue
+++ b/src/views/consume/bean/articleVideo.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch, nextTick } from 'vue'
 import { dayjs, ElMessage } from 'element-plus'
 import request from '@/util/http.js'
 import API from '@/util/http.js'
@@ -40,6 +40,10 @@ const formatTime = (val) => val ? dayjs(val).format('YYYY-MM-DD HH:mm:ss') : ''
 const adminData = ref({})
 // 充值明细表格
 const tableData = ref([])
+const tableRef = ref(null)
+const scrollTableTop = () => {
+  tableRef.value?.setScrollTop?.(0)
+}
 
 // 搜索articleVideo 表单
 const beanConsumeArticle = ref({
@@ -219,6 +223,8 @@ const ConsumeSelectBy = async function (val) {
         return true;
       });
       tableData.value = filteredList;
+      await nextTick()
+      scrollTableTop()
 
     }
 
@@ -563,7 +569,7 @@ const getTagText = (state) => {
       {{ t('common.freeGoldBean') }}{{ format3(Math.abs(freeBean)) }}
     </div>
     <div style="overflow-y: auto">
-      <el-table :data="tableData" style="width: 82vw" height="61vh" @sort-change="handleSortChange"
+      <el-table ref="tableRef" :data="tableData" style="width: 82vw" height="61vh" @sort-change="handleSortChange"
       :row-style="{ height: '50px' }">
         <el-table-column type="index" :label="t('common_list.id')" width="80px" fixed="left">
           <template #default="scope">
diff --git a/src/views/consume/bean/dieHardFan.vue b/src/views/consume/bean/dieHardFan.vue
index 074b5be..03a627e 100644
--- a/src/views/consume/bean/dieHardFan.vue
+++ b/src/views/consume/bean/dieHardFan.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch, nextTick } from 'vue'
 import { dayjs, ElMessage } from 'element-plus'
 import request from '@/util/http.js'
 import API from '@/util/http.js'
@@ -42,6 +42,10 @@ const defaultTime = [
 const adminData = ref({})
 // 充值明细表格
 const tableData = ref([])
+const tableRef = ref(null)
+const scrollTableTop = () => {
+  tableRef.value?.setScrollTop?.(0)
+}
 
 // 搜索beanConsumeFan 表单
 const beanConsumeFan = ref({
@@ -210,6 +214,8 @@ const ConsumeSelectBy = async function (val) {
     console.log('接口响应结果', result);
     if (result.code === 200 && result.data && result.data.list) {
       tableData.value = result.data.list;
+      await nextTick()
+      scrollTableTop()
       total.value = result.data.total;
     }
 
@@ -547,7 +553,7 @@ const getTagText = (state) => {
       {{ t('common.freeGoldBean') }}{{ format3(Math.abs(freeBean)) }}
     </div>
     <div style="overflow-y: auto">
-      <el-table :data="tableData" style="width: 82vw" height="65vh" @sort-change="handleSortChange"
+      <el-table ref="tableRef" :data="tableData" style="width: 82vw" height="65vh" @sort-change="handleSortChange"
       :row-style="{ height: '50px' }">
         <el-table-column type="index" :label="t('common_list.id')" width="80px" fixed="left">
           <template #default="scope">
diff --git a/src/views/consume/bean/liveStream.vue b/src/views/consume/bean/liveStream.vue
index 46c6dc5..096f6a3 100644
--- a/src/views/consume/bean/liveStream.vue
+++ b/src/views/consume/bean/liveStream.vue
@@ -1,5 +1,5 @@
 <script setup>
-import {computed, onMounted, ref, watch} from 'vue'
+import {computed, onMounted, ref, watch, nextTick} from 'vue'
 import {dayjs, ElMessage} from 'element-plus'
 import request from '@/util/http.js'
 import API from '@/util/http.js'
@@ -44,6 +44,10 @@ const formatTime = (val) => val ? dayjs(val).format('YYYY-MM-DD HH:mm:ss') : ''
 const adminData = ref({})
 // 充值明细表格
 const tableData = ref([])
+const tableRef = ref(null)
+const scrollTableTop = () => {
+  tableRef.value?.setScrollTop?.(0)
+}
 
 // 搜索beanConsumeLive 表单
 const beanConsumeLive = ref({
@@ -251,6 +255,8 @@ const selectLiveBy = async function (val) {
     console.log('接口响应结果', result); // 打印接口响应结果
     if (result.code === 200 && result.data && result.data.list) {
       tableData.value = result.data.list;
+      await nextTick()
+      scrollTableTop()
       total.value = result.data.total;
     }
     // 复制一份 beanConsumeLive.value 并设置固定的 payType 值 1是直播
@@ -588,7 +594,7 @@ const getTagText = (state) => {
       {{ t('common.freeGoldBean') }}{{ format3(Math.abs(freeBean)) }}
     </div>
     <div style="overflow-y: auto">
-      <el-table :data="tableData" style="width: 82vw" height="65vh" @sort-change="handleSortChange"
+      <el-table ref="tableRef" :data="tableData" style="width: 82vw" height="65vh" @sort-change="handleSortChange"
                 :row-style="{ height: '50px' }">
         <el-table-column type="index" :label="t('common_list.id')" width="80px" fixed="left">
           <template #default="scope">
diff --git a/src/views/consume/gold/coinConsumeDetail.vue b/src/views/consume/gold/coinConsumeDetail.vue
index 6b1826b..9164422 100644
--- a/src/views/consume/gold/coinConsumeDetail.vue
+++ b/src/views/consume/gold/coinConsumeDetail.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch, nextTick } from 'vue'
 import { dayjs, ElMessage } from 'element-plus'
 import request from '@/util/http.js'
 import API from '@/util/http.js'
@@ -58,6 +58,10 @@ const defaultTime = [
 const adminData = ref({})
 // 充值明细表格
 const tableData = ref([])
+const tableRef = ref(null)
+const scrollTableTop = () => {
+  tableRef.value?.setScrollTop?.(0)
+}
 
 // 搜索consumeUser 表单
 const consumeUser = ref({
@@ -271,6 +275,8 @@ const ConsumeSelectBy = async function (val) {
 
     // 存储表格数据
     tableData.value = result.data.list
+    await nextTick()
+    scrollTableTop()
     tableDataTotal.value = resultTotalGold.data
     if (resultTotalGold.data == null) {
       console.log('请求成功2', resultTotalGold)
@@ -659,7 +665,7 @@ const getMarket = async function () {
       {{ $t('common.taskGold') }}：{{ format3(Math.abs(taskGolds)) }}
     </div>
     <div style="height: 65vh;">
-      <el-table :data="tableData" style="height: 65vh" @sort-change="handleSortChange" 
+      <el-table ref="tableRef" :data="tableData" style="height: 65vh" @sort-change="handleSortChange" 
       :row-style="{ height: '50px' }">
         <el-table-column type="index" :label="$t('common_list.id')" width="80px" fixed="left">
           <template #default="scope">