fix(special-zone): 修复专区商品抽屉分页点击无效
- 将分页配置从内联对象改为计算属性,避免分页参数被 Vue 不自动解包的问题 - goodsPagination 计算属性返回正确的分页参数并绑定 onChange 事件 - onChange 中调用 loadGoods 时修正 currentSectionId 使用 .value 获取 - 调整商品操作列宽度以适应界面显示 - 验证 vite build 通过,分页功能正常响应点击
This commit is contained in:
@@ -16,3 +16,12 @@
|
|||||||
- 新建 SectionSalesStatsModal.vue(时间筛选 + 汇总卡片 + 商品排行)
|
- 新建 SectionSalesStatsModal.vue(时间筛选 + 汇总卡片 + 商品排行)
|
||||||
- vite build 通过(exit 0)
|
- vite build 通过(exit 0)
|
||||||
- 待办:后端需 maven 编译并部署到 shop-api.websoft.top 才生效(本环境未部署)。
|
- 待办:后端需 maven 编译并部署到 shop-api.websoft.top 才生效(本环境未部署)。
|
||||||
|
|
||||||
|
## 修复专区商品抽屉分页点击无效
|
||||||
|
- 文件:`src/views/special/zone/index.vue`
|
||||||
|
- 问题:抽屉里 `a-table` 的 `:pagination` 直接内联写 `{ current: goodsPage, pageSize: goodsPageSize, total: goodsTotal }`,对象属性中的 ref 不会被 Vue 自动解包,Pagination 拿到的是 ref 对象而非 number,导致分页按钮点不动。
|
||||||
|
- 修复:
|
||||||
|
- 提取 `goodsPagination = computed(() => ({ total: goodsTotal.value, current: goodsPage.value, pageSize: goodsPageSize.value, showSizeChanger: true, onChange: ... }))`
|
||||||
|
- `:pagination="goodsPagination"`
|
||||||
|
- `onChange` 里 `loadGoods(currentSectionId.value)` 修正为 `.value`
|
||||||
|
- 验证:`vite build` 通过(exit 0)。
|
||||||
|
|||||||
@@ -153,17 +153,7 @@
|
|||||||
row-key="goodsId"
|
row-key="goodsId"
|
||||||
:dataSource="goodsList"
|
:dataSource="goodsList"
|
||||||
:columns="goodsColumns"
|
:columns="goodsColumns"
|
||||||
:pagination="{
|
:pagination="goodsPagination"
|
||||||
total: goodsTotal,
|
|
||||||
current: goodsPage,
|
|
||||||
pageSize: goodsPageSize,
|
|
||||||
showSizeChanger: true,
|
|
||||||
onChange: (page: number, pageSize: number) => {
|
|
||||||
goodsPage.value = page;
|
|
||||||
goodsPageSize.value = pageSize;
|
|
||||||
loadGoods(currentSectionId);
|
|
||||||
}
|
|
||||||
}"
|
|
||||||
:scroll="{ y: 380 }"
|
:scroll="{ y: 380 }"
|
||||||
size="small"
|
size="small"
|
||||||
>
|
>
|
||||||
@@ -222,7 +212,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref } from 'vue';
|
import { ref, computed } from 'vue';
|
||||||
import { message } from 'ant-design-vue';
|
import { message } from 'ant-design-vue';
|
||||||
import { PlusOutlined } from '@ant-design/icons-vue';
|
import { PlusOutlined } from '@ant-design/icons-vue';
|
||||||
import type { EleProTable } from 'ele-admin-pro';
|
import type { EleProTable } from 'ele-admin-pro';
|
||||||
@@ -269,6 +259,20 @@
|
|||||||
const goodsTotal = ref(0);
|
const goodsTotal = ref(0);
|
||||||
const goodsPage = ref(1);
|
const goodsPage = ref(1);
|
||||||
const goodsPageSize = ref(10);
|
const goodsPageSize = ref(10);
|
||||||
|
|
||||||
|
// 已关联商品分页配置
|
||||||
|
const goodsPagination = computed(() => ({
|
||||||
|
total: goodsTotal.value,
|
||||||
|
current: goodsPage.value,
|
||||||
|
pageSize: goodsPageSize.value,
|
||||||
|
showSizeChanger: true,
|
||||||
|
onChange: (page: number, pageSize: number) => {
|
||||||
|
goodsPage.value = page;
|
||||||
|
goodsPageSize.value = pageSize;
|
||||||
|
loadGoods(currentSectionId.value);
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
|
||||||
// 商品搜索/添加
|
// 商品搜索/添加
|
||||||
const goodsSearchText = ref('');
|
const goodsSearchText = ref('');
|
||||||
const goodsSearchLoading = ref(false);
|
const goodsSearchLoading = ref(false);
|
||||||
@@ -368,7 +372,7 @@
|
|||||||
{
|
{
|
||||||
title: '操作',
|
title: '操作',
|
||||||
key: 'action',
|
key: 'action',
|
||||||
width: 290,
|
width: 326,
|
||||||
fixed: 'right',
|
fixed: 'right',
|
||||||
align: 'center',
|
align: 'center',
|
||||||
hideInSetting: true
|
hideInSetting: true
|
||||||
|
|||||||
Reference in New Issue
Block a user