From 330899d1b11435c7f6e77a20ec017780b5545b96 Mon Sep 17 00:00:00 2001
From: zhangrenyuan <18990852002@163.com>
Date: Thu, 12 Feb 2026 10:39:23 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=A1=A8=E6=A0=BC?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E6=9B=B4=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和setScrollTop方法，在数据更新后自动将表格滚动到顶部，确保用户始终看到最新的数据条目。

涉及页面：
- 铁粉管理 (fans.vue)
- 角色权限管理 (rolePermission.vue)
- 用户权限管理 (userPermission.vue)
- 语言翻译管理 (languageTranslate.vue)
- 活动管理 (activity.vue)
- 打赏管理 (reward.vue)

每个页面都添加了：
1. 引入nextTick
2. 添加tableRef引用
3. 实现scrollTableTop方法
4. 在数据更新后调用nextTick和scrollTableTop
---
 src/views/activityManage/activity.vue     | 12 +++++++++---
 src/views/channelManage/fans/fans.vue     | 11 ++++++++---
 src/views/channelManage/reward/reward.vue | 12 +++++++++---
 src/views/language/languageTranslate.vue  | 12 +++++++++---
 src/views/permissions/rolePermission.vue  | 11 +++++++++--
 src/views/permissions/userPermission.vue  | 12 +++++++++---
 6 files changed, 53 insertions(+), 17 deletions(-)

diff --git a/src/views/activityManage/activity.vue b/src/views/activityManage/activity.vue
index 9967153..453407e 100644
--- a/src/views/activityManage/activity.vue
+++ b/src/views/activityManage/activity.vue
@@ -38,7 +38,7 @@
             <el-button type="success" @click="showAdd = true">{{ t('common.addActivity') }}</el-button>
         </div>
         <div>
-            <el-table :data="tableData" style="width: 82vw;height:70vh;" :row-style="{ height: '50px' }">
+            <el-table :ref="tableRef" :data="tableData" style="width: 82vw;height:70vh;" :row-style="{ height: '50px' }">
                 <el-table-column type="index" :label="t('common_list.id')" width="100px" fixed="left">
                     <template #default="scope">
                         <span>{{ scope.$index + 1 + (pagination.pageNum - 1) * pagination.pageSize }}</span>
@@ -152,7 +152,7 @@
 </template>
 <script setup>
 import { ElMessage, ElPagination } from 'element-plus';
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, nextTick } from 'vue'
 import API from "@/util/http.js"
 import moment from 'moment'
 import { useAdminStore } from "@/store/index.js"
@@ -175,6 +175,10 @@ const getActivityStatusText = (status) => {
 
 const activityNameReg = /^[\u4e00-\u9fa5a-zA-Z0-9，。！？、；：“”（）‘’《》【】{}——~,.!?:;'()\[\]_&+=\/-]+$/;
 const tableData = ref([])
+const tableRef = ref(null)
+const scrollTableTop = () => {
+    tableRef.value?.setScrollTop?.(0)
+}
 const pagination = ref({
     pageNum: 1,
     pageSize: 10,
@@ -226,7 +230,9 @@ const getActivity = async function () {
         data: params
     })
     if (res.code === 200) {
-        tableData.value = res.data.list
+        tableData.value = res.data.list || []
+        await nextTick()
+        scrollTableTop()
         pagination.value.total = res.data.total
     }
 }
diff --git a/src/views/channelManage/fans/fans.vue b/src/views/channelManage/fans/fans.vue
index 5dbc629..1743d7c 100644
--- a/src/views/channelManage/fans/fans.vue
+++ b/src/views/channelManage/fans/fans.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,7 +42,10 @@ const defaultTime = [
 const adminData = ref({})
 // 充值明细表格
 const tableData = ref([])
-
+const tableRef = ref(null)
+const scrollTableTop = () => {
+    tableRef.value?.setScrollTop?.(0)
+}
 // 搜索beanConsumeFan 表单
 const beanConsumeFan = ref({
   jwcode: null,
@@ -230,7 +233,9 @@ const ConsumeSelectBy = async function (val) {
     console.log('请求成功3', sortField)
     console.log('接口响应结果', result);
     if (result.code === 200 && result.data && result.data.list) {
-      tableData.value = result.data.list;
+      tableData.value = result.data.list || [];
+      await nextTick()
+      scrollTableTop()
       total.value = result.data.total;
     }
 
diff --git a/src/views/channelManage/reward/reward.vue b/src/views/channelManage/reward/reward.vue
index ffbde65..17219fb 100644
--- a/src/views/channelManage/reward/reward.vue
+++ b/src/views/channelManage/reward/reward.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'
@@ -43,6 +43,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({
@@ -270,7 +274,9 @@ const selectLiveBy = async function (val) {
     console.log('请求成功2', sortField)
     console.log('接口响应结果', result); // 打印接口响应结果
     if (result.code === 200 && result.data && result.data.list) {
-      tableData.value = result.data.list;
+      tableData.value = result.data.list || [];
+      await nextTick()
+      scrollTableTop()
       total.value = result.data.total;
     }
     // 复制一份 beanConsumeLive.value 并设置固定的 payType 值 1是直播
@@ -609,7 +615,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/language/languageTranslate.vue b/src/views/language/languageTranslate.vue
index db4c273..c5f5824 100644
--- a/src/views/language/languageTranslate.vue
+++ b/src/views/language/languageTranslate.vue
@@ -23,7 +23,7 @@
         </div>
 
         <div>
-            <el-table :data="tableData" style="width: 82vw;height:72vh;" :row-style="{ height: '50px' }">
+            <el-table ref="tableRef" :data="tableData" style="width: 82vw;height:72vh;" :row-style="{ height: '50px' }">
                 <el-table-column type="index" :label="t('common_list.id')" width="80px" fixed="left">
                     <template #default="scope">
                         <span>{{ scope.$index + 1 + (pagination.pageNum - 1) * pagination.pageSize }}</span>
@@ -213,7 +213,7 @@
 
 <script setup>
 import { ElMessage, ElMessageBox } from 'element-plus';
-import { onMounted, ref, computed } from 'vue'
+import { onMounted, ref, computed, nextTick } from 'vue'
 import request from "@/util/http.js"
 import moment from 'moment'
 import { UploadFilled } from '@element-plus/icons-vue'
@@ -229,6 +229,10 @@ const { t } = useI18n()
 
 // 响应式数据
 const tableData = ref([])
+const tableRef = ref(null)
+const scrollTableTop = () => {
+    tableRef.value?.setScrollTop?.(0)
+}
 const pagination = ref({
     pageNum: 1,
     pageSize: 20,
@@ -302,7 +306,9 @@ const getTranslationList = async () => {
 
         if (res.code === 200) {
             // 不再需要设置统一的状态字段
-            tableData.value = res.data.list
+            tableData.value = res.data.list || []
+            await nextTick()
+            scrollTableTop()
             pagination.value.total = res.data.total
         }
     } catch (error) {
diff --git a/src/views/permissions/rolePermission.vue b/src/views/permissions/rolePermission.vue
index 00b08b9..24e8404 100644
--- a/src/views/permissions/rolePermission.vue
+++ b/src/views/permissions/rolePermission.vue
@@ -17,6 +17,11 @@ import { useI18n } from 'vue-i18n'
 const Ref = ref(null)
 const { t } = useI18n()
 const roleData = ref([])
+const tableRef = ref(null)
+const scrollTableTop = () => {
+    tableRef.value?.setScrollTop?.(0)
+}
+
 const roleTotal = ref(100)
 const treeRef = ref(null)
 const admin = ref({
@@ -68,7 +73,9 @@ const getRoleList = async function (val) {
         }
       }
     })
-    roleData.value = result.data.list
+    roleData.value = result.data.list || []
+    await nextTick()
+    scrollTableTop()
     console.log('roleData', roleData.value)
     roleTotal.value = result.data.total
   } catch (error) {
@@ -685,7 +692,7 @@ onMounted(async function () {
         </el-button>
       </div>
       <div>
-        <el-table :data="roleData" style="width: 82vw;height:71.3vh" show-overflow-tooltip
+        <el-table ref="tableRef" :data="roleData" style="width: 82vw;height:71.3vh" show-overflow-tooltip
           :row-style="{ height: '56px' }">
           <el-table-column type="index" :label="t('common_list.id')" width="100px" fixed="left">
             <template #default="scope">
diff --git a/src/views/permissions/userPermission.vue b/src/views/permissions/userPermission.vue
index 4707216..dedcb98 100644
--- a/src/views/permissions/userPermission.vue
+++ b/src/views/permissions/userPermission.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, nextTick } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { InfoFilled } from '@element-plus/icons-vue'
 import _ from 'lodash'
@@ -19,6 +19,10 @@ const { adminData, menuTree } = storeToRefs(adminStore)
 
 // 表格数据
 const tableData = ref([])
+const tableRef = ref(null)
+const scrollTableTop = () => {
+    tableRef.value?.setScrollTop?.(0)
+}
 const total = ref(100)
 const handleDialogClose = function () {
   closeUserAddVisible()
@@ -165,7 +169,9 @@ const getPermission = async function (val) {
         }
       }
     })
-    tableData.value = result.data.list
+    tableData.value = result.data.list || []
+    await nextTick()
+    scrollTableTop()
     console.log('tableData', tableData.value)
     total.value = result.data.total
   } catch (error) {
@@ -952,7 +958,7 @@ onMounted(async function () {
       </div>
 
       <div>
-        <el-table :data="tableData" style="width: 82vw;height:71.3vh" show-overflow-tooltip
+        <el-table ref="tableRef" :data="tableData" style="width: 82vw;height:71.3vh" show-overflow-tooltip
         >
           <el-table-column type="index" :label="t('common_list.id')" width="100px" fixed="left">
             <template #default="scope">