Browse Source

fix(表格-退款管理和客户账户明细): 修复表格数据刷新后滚动条位置未重置的问题

在四个表格组件中添加表格引用和滚动到顶部的方法,当数据更新后通过 nextTick 确保 DOM 更新,然后调用 setScrollTop(0) 将表格滚动条重置到顶部,避免用户查看新数据时停留在旧位置。
milestone-20260212-日常优化2.0
zhangrenyuan 3 weeks ago
parent
commit
85838beedd
  1. 10
      src/views/refund/gold/coinRefundDetail.vue
  2. 10
      src/views/usergold/bean/userbean.vue
  3. 10
      src/views/usergold/gold/clientCountBalance.vue
  4. 11
      src/views/usergold/gold/clientCountDetail.vue

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

10
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) {

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

11
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',
@ -551,7 +557,8 @@ const format3 = (num) => {
<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' }">
<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>{{

Loading…
Cancel
Save