Browse Source

fix(表格-现金管理完成): 修复表格数据刷新后滚动位置未重置的问题

在三个资金管理页面的表格组件中添加 ref 引用,并在数据加载完成后自动滚动到顶部
milestone-20260212-日常优化2.0
zhangrenyuan 3 weeks ago
parent
commit
0707bcd353
  1. 10
      src/views/moneyManage/executor/executor.vue
  2. 10
      src/views/moneyManage/financialAccount/cashFlow.vue
  3. 10
      src/views/moneyManage/financialAccount/performanceAttribution.vue

10
src/views/moneyManage/executor/executor.vue

@ -53,7 +53,7 @@
</el-card>
<el-card style="background-color: rgb(231,244,253);height:80vh;">
<el-table :data="tableData" style="height:70vh;width:82vw;">
<el-table :ref="tableRef" :data="tableData" style="height:70vh;width:82vw;">
<el-table-column type="index" :label="t('common_list.id')" width="60" fixed="left">
<template #default="scope">
{{ scope.$index + 1 + (pagination.pageNum - 1) * pagination.pageSize }}
@ -261,7 +261,7 @@
</el-dialog>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { ref, onMounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import API from '@/util/http.js'
import dayjs from 'dayjs'
@ -281,6 +281,10 @@ const { t } = useI18n()
const uploadUrl = 'https://api.homilychart.com/hljw/api/aws/upload'
const dateRange = ref([])
const tableData = ref([])
const tableRef = ref(null)
const scrollTableTop = () => {
tableRef.value?.setScrollTop?.(0)
}
const editRow = ref({})//
const statusList = ref([t('cash.pending'), t('cash.refundSuccess')])
const pagination = ref({
@ -355,6 +359,8 @@ const getRefund = async function () {
})
tableData.value = result.data.list || []
await nextTick()
scrollTableTop()
pagination.value.total = result.data.total || 0
} catch (error) {
ElMessage.error(error.message || t('elmessage.searchFailed'))

10
src/views/moneyManage/financialAccount/cashFlow.vue

@ -1,5 +1,5 @@
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ref, reactive, onMounted, nextTick } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import request from '@/util/http.js'
@ -57,6 +57,10 @@ const queryParams = reactive({
const total = ref(0)
const tableData = ref([])
const tableRef = ref(null)
const scrollTableTop = () => {
tableRef.value?.setScrollTop?.(0)
}
const loading = ref(false)
// coinConsumeDetail.vue
@ -124,6 +128,8 @@ const fetchData = async () => {
const res = await Moneyfunds(params)
if (res.code == 200) {
tableData.value = res.data.list || []
await nextTick()
scrollTableTop()
total.value = res.data.total || 0
loading.value = false
} else {
@ -455,7 +461,7 @@ onMounted(async () => {
<!-- 表格区域 -->
<el-card class="table-card">
<el-table :data="tableData" v-loading="loading" style="width: 100%; flex: 1;" :cell-style="{ textAlign: 'center' }" :header-cell-style="{ background: '#F3FAFE', color: '#333',textAlign: 'center' }">
<el-table :ref="tableRef" :data="tableData" v-loading="loading" style="width: 100%; flex: 1;" :cell-style="{ textAlign: 'center' }" :header-cell-style="{ background: '#F3FAFE', color: '#333',textAlign: 'center' }">
<el-table-column type="index" :label="t('common_list.id')" width="60" align="center" fixed="left" />
<el-table-column prop="jwcode" :label="t('common_list.jwcode')" width="120" fixed="left" />
<el-table-column prop="name" :label="t('common_list.name')" width="150" show-overflow-tooltip />

10
src/views/moneyManage/financialAccount/performanceAttribution.vue

@ -1,5 +1,5 @@
<script setup>
import { ref, reactive, onMounted, toRefs } from 'vue'
import { ref, reactive, onMounted, toRefs, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import request from '@/util/http.js'
import dayjs from 'dayjs'
@ -49,6 +49,10 @@ const queryParams = reactive({
const total = ref(0)
const tableData = ref([])
const tableRef = ref(null)
const scrollTableTop = () => {
tableRef.value?.setScrollTop?.(0)
}
const loading = ref(false)
// coinConsumeDetail.vue
@ -101,6 +105,8 @@ const fetchData = async () => {
const res = await performanceSelect(params)
if (res.code == 200) {
tableData.value = res.data.list || []
await nextTick()
scrollTableTop()
total.value = res.data.total || 0
loading.value = false
} else {
@ -312,7 +318,7 @@ onMounted( async() => {
<!-- 表格区域 -->
<el-card class="table-card">
<el-table :data="tableData" v-loading="loading" style="width: 100%; flex: 1;" :cell-style="{ textAlign: 'center' }" :header-cell-style="{ background: '#F3FAFE', color: '#333',textAlign: 'center' }">
<el-table :ref="tableRef" :data="tableData" v-loading="loading" style="width: 100%; flex: 1;" :cell-style="{ textAlign: 'center' }" :header-cell-style="{ background: '#F3FAFE', color: '#333',textAlign: 'center' }">
<el-table-column type="index" :label="t('common_list.id')" min-width="60" align="center" fixed="left" />
<el-table-column prop="jwcode" :label="t('common_list.jwcode')" min-width="120" fixed="left" />
<el-table-column prop="name" :label="t('common_list.name')" min-width="150" show-overflow-tooltip />

Loading…
Cancel
Save