From 85838beedd08a22046b0154ca3ebcdf72508be3d Mon Sep 17 00:00:00 2001
From: zhangrenyuan <18990852002@163.com>
Date: Thu, 12 Feb 2026 09:53:22 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E8=A1=A8=E6=A0=BC-=E9=80=80=E6=AC=BE?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E5=92=8C=E5=AE=A2=E6=88=B7=E8=B4=A6=E6=88=B7?=
 =?UTF-8?q?=E6=98=8E=E7=BB=86):=20=E4=BF=AE=E5=A4=8D=E8=A1=A8=E6=A0=BC?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=88=B7=E6=96=B0=E5=90=8E=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E6=9D=A1=E4=BD=8D=E7=BD=AE=E6=9C=AA=E9=87=8D=E7=BD=AE=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在四个表格组件中添加表格引用和滚动到顶部的方法，当数据更新后通过 nextTick 确保 DOM 更新，然后调用 setScrollTop(0) 将表格滚动条重置到顶部，避免用户查看新数据时停留在旧位置。
---
 src/views/refund/gold/coinRefundDetail.vue     | 10 ++++++++--
 src/views/usergold/bean/userbean.vue           | 10 ++++++++--
 src/views/usergold/gold/clientCountBalance.vue | 10 ++++++++--
 src/views/usergold/gold/clientCountDetail.vue  | 13 ++++++++++---
 4 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/src/views/refund/gold/coinRefundDetail.vue b/src/views/refund/gold/coinRefundDetail.vue
index 3dd23f4..68468f8 100644
--- a/src/views/refund/gold/coinRefundDetail.vue
+++ b/src/views/refund/gold/coinRefundDetail.vue
@@ -1,6 +1,6 @@
 <script setup>
 // 这是退款明细页面
-import { computed, onMounted, ref,watch } from 'vue'
+import { computed, onMounted, ref,watch,nextTick } from 'vue'
 import { ElMessage } from 'element-plus'
 import moment from 'moment'
 import API from '@/util/http.js'
@@ -67,6 +67,10 @@ const handleDatePickerChange = () => {
 }
 // 充值明细表格
 const tableData = ref([])
+const tableRef = ref(null)
+const scrollTableTop = () => {
+  tableRef.value?.setScrollTop?.(0)
+}
 // 搜索======================================
 // 搜索detail
 const refundUser = ref({
@@ -211,6 +215,8 @@ const getSelectBy = async function (val) {
       freeGold: (Number(item.freeGold) || 0),
       taskGold: (Number(item.taskGold) || 0)
     }))
+    await nextTick()
+    scrollTableTop()
     console.log('tableData', tableData.value)
     // 存储分页总数
     total.value = result.data.total
@@ -583,7 +589,7 @@ const getMarket = async function () {
     </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">
diff --git a/src/views/usergold/bean/userbean.vue b/src/views/usergold/bean/userbean.vue
index 7e2c176..2838ea5 100644
--- a/src/views/usergold/bean/userbean.vue
+++ b/src/views/usergold/bean/userbean.vue
@@ -20,7 +20,7 @@
             {{ t('common.freeGoldBean') }}{{ format3(stats.freeBean) }}{{ t('common.goldBean') }}&nbsp;&nbsp;&nbsp;&nbsp;
             {{ t('common.consumeGoldBean') }}{{ format3(stats.consumeSum) }}{{ t('common.goldBean') }}&nbsp;&nbsp;&nbsp;&nbsp;
         </div>
-        <el-table :data="tableData" height="73vh" @sort-change="handleSortChange" :row-style="{ height: '50px' }">
+        <el-table ref="tableRef" :data="tableData" height="73vh" @sort-change="handleSortChange" :row-style="{ height: '50px' }">
             <el-table-column type="index" :label="t('common_list.id')" width="80px" fixed="left">
                 <template #default="scope">
                     <span>{{
@@ -48,7 +48,7 @@
 
 </template>
 <script setup>
-import { ref, onMounted, watch } from 'vue'
+import { ref, onMounted, watch, nextTick } from 'vue'
 import API from '@/util/http.js'
 import { useAdminStore } from "@/store/index.js";
 import { storeToRefs } from "pinia";
@@ -70,6 +70,10 @@ const {t} = useI18n()
 
 const canLook = ref(findMenuById(menuTree.value, permissionMapping.gold_bean_customer_details))
 const tableData = ref([])
+const tableRef = ref(null)
+const scrollTableTop = () => {
+  tableRef.value?.setScrollTop?.(0)
+}
 const marketOptions = ref([])
 const searchObj = ref({
     jwcode: '',
@@ -119,6 +123,8 @@ const get = async function () {
         })
         if (res.code === 200) {
             tableData.value = res.data.list
+            await nextTick()
+            scrollTableTop()
             pagination.value.total = res.data.total
         }
     } catch (error) {
diff --git a/src/views/usergold/gold/clientCountBalance.vue b/src/views/usergold/gold/clientCountBalance.vue
index 6e2755c..faba17e 100644
--- a/src/views/usergold/gold/clientCountBalance.vue
+++ b/src/views/usergold/gold/clientCountBalance.vue
@@ -13,7 +13,7 @@ const { adminData, menuTree, flag } = storeToRefs(adminStore)
     get()
   }
 })
-import { onMounted, ref,watch } from 'vue'
+import { onMounted, ref, watch, nextTick } from 'vue'
 import { ElMessage } from 'element-plus'
 import moment from 'moment'
 import API from '@/util/http.js'
@@ -36,6 +36,10 @@ const markets = ref([])
 
 // 充值明细表格
 const tableData = ref([])
+const tableRef = ref(null)
+const scrollTableTop = () => {
+  tableRef.value?.setScrollTop?.(0)
+}
 
 // 新增金币总数变量
 const goldtotal = ref(0)
@@ -164,6 +168,8 @@ const get = async function (val) {
       console.log('总数据请求成功', result)
       // 存储表格数据
       tableData.value = result.data.list
+      await nextTick()
+      scrollTableTop()
       console.log('tableData', tableData.value)
 
       // 从接口返回数据中获取各金币数值
@@ -425,7 +431,7 @@ const format3 = (num) => {
     </div>
     <!-- 设置表格容器的高度和滚动样式 -->
     <div style="height: 69vh; overflow-y: auto">
-      <el-table :data="tableData" @cellClick="cellClick" style="width: 82vw; height:69vh"
+      <el-table ref="tableRef" :data="tableData" @cellClick="cellClick" style="width: 82vw; height:69vh"
         @sort-change="handleSortChange" :row-style="{ height: '50px' }">
         <el-table-column type="index" :label="$t('common_list.id')" width="100px" fixed="left">
           <template #default="scope">
diff --git a/src/views/usergold/gold/clientCountDetail.vue b/src/views/usergold/gold/clientCountDetail.vue
index 1ed1c43..fb71ec7 100644
--- a/src/views/usergold/gold/clientCountDetail.vue
+++ b/src/views/usergold/gold/clientCountDetail.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref, watch, nextTick } from 'vue'
 
 import { ElMessage } from 'element-plus'
 import moment from 'moment'
@@ -105,6 +105,10 @@ const markets = ref([])
 
 // 充值明细表格
 const tableData = ref([])
+const tableRef = ref(null)
+const scrollTableTop = () => {
+  tableRef.value?.setScrollTop?.(0)
+}
 // 各金币字段变量
 // const sumGoldTotal = ref(0)
 const permanentGold = ref(0)
@@ -185,6 +189,8 @@ const get = async function (val) {
     })
     console.log('响应数据', result)
     tableData.value = result.data.list
+    await nextTick()
+    scrollTableTop()
     total.value = result.data.total
     const totalResult = await API({
       url: '/goldDetail/getTotal',
@@ -550,8 +556,9 @@ const format3 = (num) => {
         {{ $t('common.taskGold') }}：{{ format3(totalTaskGold || 0) }}&nbsp;&nbsp;
         <a style="color:#b1b1b1; font-size: small;">{{ $t('common.netGoldChangeTip') }}</a>
       </div>
-      <div style="height: 65vh; ">
-        <el-table :data="tableData" style="height: 65vh" @sort-change="handleSortChange"  :row-style="{ height: '50px' }">
+      <div style="height: 65vh;">
+        <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">
               <span>{{