fix(表格): 修复分页或搜索后表格滚动位置未重置的问题

在多个审计和充值页面的表格组件中，当用户进行分页切换、修改每页条数或执行搜索操作时，表格内容会更新但滚动条位置保持不变，导致用户看到的是表格底部或中间的内容。

- 为表格添加 ref 引用，以便调用 setScrollTop(0) 方法
- 在 handlePageSizeChange、handleCurrentChange 和搜索函数中调用 setScrollTop(0) 重置滚动位置
- 对于 beanOnlineRecharge 和 beanSystemRecharge 页面，使用 nextTick 确保 DOM 更新后执行滚动重置

src/views/audit/bean/beanAudit.vue

@@ -573,10 +573,12 @@ const handleDatePickerChange = () => {
 }
 const handlePageSizeChange = function (val) {
   pagination.value.pageSize = val
+  tableRef.value.setScrollTop(0)
   get()
 }
 const handleCurrentChange = function (val) {
   pagination.value.pageNum = val
+  tableRef.value.setScrollTop(0)
   get()
 }
 const format3 = (num) => {

src/views/audit/gold/rechargeAudit.vue

@@ -85,7 +85,7 @@
         {{ $t('audit.freeGold') }}：{{ format3(stats.freeGolds.toFixed(2)) }}{{ $t('common.goldCoin') }}    
       </div>
 
-    <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('audit.id')" width="100px" fixed="left">
         <template #default="scope">
@@ -263,6 +263,7 @@ const disabledDate = (time) => {
   return time.getTime() < limitDate.getTime();
 }
 const tableData = ref([])
+const tableRef = ref(null)
 // 当前激活的时间按钮
 const activeTimeRange = ref('')
 const total = ref(50)
@@ -606,6 +607,7 @@ const handlePagination = (type, val) => {
   } else {
     getObj.value.pageNum = val
   }
+  tableRef.value.setScrollTop(0)
   getRecharge()
   getStats()
 }

src/views/audit/gold/refundAudit.vue

@@ -84,9 +84,13 @@
       {{ $t('audit.taskGold') }}：{{ format3(stats.taskGolds.toFixed(2)) }}{{ $t('common.goldCoin') }}
     </div>
 
-    <el-table :data="tableData" style="height:61vh;width:82vw" @sort-change="handleSortChange"
+    <el-table ref="tableRef" :data="tableData" style="height:61vh;width:82vw" @sort-change="handleSortChange"
       :row-style="{ height: '50px' }">
-      <el-table-column fixed="left" type="index" :label="$t('audit.id')" width="60" />
+      <el-table-column fixed="left" type="index" :label="$t('audit.id')" width="60">
+        <template #default="scope">
+          {{ scope.$index + 1 + (pagination.pageNum - 1) * pagination.pageSize }}
+        </template>
+      </el-table-column>
       <el-table-column fixed="left" prop="name" :label="$t('audit.name')" width="120" show-overflow-tooltip />
       <el-table-column fixed="left" prop="jwcode" :label="$t('audit.jwcode')" width="120" />
       <el-table-column prop="market" :label="$t('audit.market')" width="120" />
@@ -268,6 +272,7 @@ const pagination = ref({
   total: 0
 })
 const tableData = ref([])
+const tableRef = ref(null)
 const marketOptions = ref([])
 const refundGoodsOptions = ref([])
 const adminInfo = ref({})
@@ -774,10 +779,12 @@ const rules = reactive({
 })
 const handlePageSizeChange = function (val) {
   pagination.value.pageSize = val
+  tableRef.value.setScrollTop(0)
   get()
 }
 const handleCurrentChange = function (val) {
   pagination.value.pageNum = val
+  tableRef.value.setScrollTop(0)
   get()
 }
 onMounted(async () => {

src/views/recharge/bean/beanOnlineRecharge.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, reactive, computed } from 'vue'
+import { ref, onMounted, reactive, computed, nextTick } from 'vue'
 import ElementPlus from 'element-plus'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { AiFillRead } from 'vue-icons-plus/ai'
@@ -24,6 +24,10 @@ const selectData = ref({
 const permanentBeans = ref(0)
 const num = ref(0)
 const money = ref(0)
+const tableRef = ref(null)
+const scrollTableTop = () => {
+  tableRef.value?.setScrollTop?.(0)
+}
 
 //获取当齐全条件的金豆总数
 const getTotalBeans = async () => {
@@ -151,7 +155,7 @@ const reset = () => {
 }
 
 //查询
-const search = () => {
+const search = async () => {
   getObj.value.pageNum = 1
   //判断精网号查询是否为数字
   getObj.value.pageNum = 1
@@ -162,8 +166,8 @@ const search = () => {
       return
     }
   }
-  get()
-  getTotalBeans()
+  await get()
+  await getTotalBeans()
 }
 //获取表格数据
 const get = async () => {
@@ -191,6 +195,8 @@ const get = async () => {
     if (result.code == 200) {
       tableData.value = result.data.list
       total.value = result.data.total
+      await nextTick()
+      scrollTableTop()
     } else {
       ElMessage.error(result.message)
     }
@@ -413,7 +419,7 @@ onMounted(async function () {
     </div>
     <!-- 设置表格容器的高度和滚动样式 -->
     <div>
-      <el-table :data="tableData" style="width:80vw;" height="65vh" @sort-change="handleSortChange"
+      <el-table ref="tableRef" :data="tableData" style="width:80vw;" 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">
@@ -545,4 +551,4 @@ onMounted(async function () {
     }
   }
 }
-</style>
+</style>

src/views/recharge/bean/beanSystemRecharge.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, reactive, computed, watch } from 'vue'
+import { ref, onMounted, reactive, computed, watch, nextTick } from 'vue'
 import ElementPlus from 'element-plus'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { AiFillRead } from 'vue-icons-plus/ai'
@@ -41,6 +41,10 @@ const defaultTime = [
 //时间格式化
 const formatTime = (val) => val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : ''
 const tableData = ref([])
+const tableRef = ref(null)
+const scrollTableTop = () => {
+  tableRef.value?.setScrollTop?.(0)
+}
 //存储所有的地区数据
 const market = ref([])
 const getTime = ref([])
@@ -165,7 +169,7 @@ const reset = () => {
 }
 
 //查询
-const search = () => {
+const search = async () => {
   //判断精网号查询是否为数字
   getObj.value.pageNum = 1
   if (selectData.value.jwcode) {
@@ -175,8 +179,8 @@ const search = () => {
       return
     }
   }
-  get()
-  getTotalBeans()
+  await get()
+  await getTotalBeans()
 }
 //获取表格数据
 const get = async () => {
@@ -205,6 +209,8 @@ const get = async () => {
     if (result.code == 200) {
       tableData.value = result.data.list
       total.value = result.data.total
+      await nextTick()
+      scrollTableTop()
     } else {
       ElMessage.error(result.message)
     }
@@ -406,7 +412,7 @@ onMounted(async function () {
       {{ t('common.freeGoldBean') }}{{ format3(freeBean) }}
     </div>
     <div>
-      <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">
@@ -540,4 +546,4 @@ onMounted(async function () {
     }
   }
 }
-</style>
+</style>

src/views/recharge/gold/coinRechargeDetail.vue

@@ -48,6 +48,7 @@ const defaultTime = [
 // 变量
 // 充值明细表格
 const tableData = ref([])
+const tableRef = ref(null)
 // 标记当前激活的时间范围按钮
 const activeTimeRange = ref('')
 // 日期选择器变化时清除按钮激活状态
@@ -437,10 +438,12 @@ const getToday = function () {
 }
 const handlePageSizeChange = function (val) {
   getObj.value.pageSize = val
+  tableRef.value.setScrollTop(0)
   get()
 }
 const handleCurrentChange = function (val) {
   getObj.value.pageNum = val
+  tableRef.value.setScrollTop(0)
   get()
 }
 // 昨天
@@ -672,7 +675,7 @@ const getTagText = (state) => {
     </div>
     <!-- 设置表格容器的高度和滚动样式 -->
     <div style="height: 66vh;">
-      <el-table :data="tableData" height="66vh" @sort-change="handleSortChange">
+      <el-table ref="tableRef" :data="tableData" height="66vh" @sort-change="handleSortChange">
         <el-table-column type="index" :label="$t('common_list.id')" width="80px" fixed="left">
           <template #default="scope">
             <span>{{