fix(表格-消耗管理): 搜索后表格自动滚动到顶部

- 在四个消费明细页面中，为el-table添加ref引用
- 引入nextTick确保DOM更新后执行滚动操作
- 添加scrollTableTop函数调用表格的setScrollTop方法
- 在每次搜索查询数据更新后自动将表格滚动到顶部位置

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">

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">

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">

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">