Arco design vue 表格排序踩坑

父组件template div classp-10 !-- 商户管理 -- div classinvate-box placeholder: div classflex items-center SvgIcon :nameuser/SvgIcon div classml-10{{ $t(channel.我的邀请码) }}/div /div div classflex justify-between items-center div clickonCopy(invateDetail.invatecode) div classflex mt-10 items-center cursor-pointer div classtext-36 font-medium{{ invateDetail.invatecode }}/div div classpy-4 px-10 bg-white rounded-md flex ml-20 items-center text-[#7833F6] font-medium divSvgIcon :nameusercopy/SvgIcon/div div classml-10{{ $t(channel.复制邀请码) }}/div /div /div div classmt-10 font-medium{{ $t(channel.复制邀请码Info) }}/div /div div classflex text-center div div classtext-24 font-medium{{ invateDetail.recent_invite_count }}/div div classtext-14 mt-10{{ $t(channel.近7天邀请) }}/div /div div classborder border-[#B58BE4] mx-30/div div div classtext-24 font-medium{{ invateDetail.total_invite_count }}/div div classtext-14 mt-10{{ $t(channel.总人数) }}/div /div /div /div /div !-- 表格 查询等 -- div classmt-20 div classmy-20 flex justify-end items-center div classw-[80%] SearchBar :itemssearchItems :loadingloading changehandleSearchChange / /div /div !-- 表格 -- ArcoTable reftableRef :current-pagesearchParams.page.page_number :page-sizesearchParams.page.page_size :columnsmerchantColumns :datatableData :totaltotal :remote-sorttrue :loadingloading :scroll{ x: 1300 } :row-selectionfalse page-changehandlePageChange sort-changehandleSortChange !-- 自定义列渲染 -- template #email{ record } a-tag colorblue{{ record.email }}/a-tag /template template #action{ record } div classcursor-pointer a-dropdown SvgIcon :namesetting /SvgIcon template #content a-doption v-for(it, ind) in channelMerchantActions :keyind clickhandleMore(it, record.invite_record_id) mouseentersetHover(it.component, true) mouseleavesetHover(it.component, false) div classflex items-center SvgIcon :nameisHover[it.component] ? it.iconActive : it.icon/SvgIcon div classml-10{{ it.label }}/div /div /a-doption /template /a-dropdown /div /template template #accountStatus{ record } !-- 账号状态 1.活跃 2.非活跃 -- !-- {{ record.status 1 ? 活跃 : 非活跃 }} -- div v-ifrecord.status 1 classtag-green{{ $t(channel.活跃) }}/div div v-else classtag-gary{{ $t(channel.非活跃) }}/div /template template #Detail{ record } !-- 详情 点击 跳转费率页面 invite_record_id -- div classw-full cursor-pointer detail-border clickonDetail(record.account) {{ $t(channel.查看费率) }} /div /template /ArcoTable /div GenericModal v-for(item, index) in channelMerchantActions :keyindex :labletitleitem.label :visiblevisibletype[item.visible] :titleitem.title :typesitem.types :component-props{ id: inviteRecordId } :content-componentitem.component closehandClose get-listgetList /GenericModal /div /template script setup langts import { ref, reactive, onMounted, watch } from vue; // computed import ArcoTable from /components/list/ArcoTable.vue; import { merchantColumns } from /constants/listColumn; // 配置列数据字段 import GenericModal from /components/modal/GenericModal.vue; import type { SearchItem } from /components/search/types; import copyText from /components/copy/copy; import { getRecordList, inviteCode, invitationStats } from /api/channel; import { channelMerchantActions as channelMerchantActionPresets, type MoreActionItem, } from /config/actionConfig; import SearchBar from /components/search/Searchbar.vue; import { useRouter } from vue-router; import { useI18n } from vue-i18n; const { t } useI18n(); const channelMerchantActions refMoreActionItem[]([...channelMerchantActionPresets]); const { copyToClipboard } copyText(); const visibletype ref({ editExchangeRate: false, modifyRemarks: false, }); const isHover reactive({ editExchangeRate: false, modifyRemarks: false, addExchangeRate: false, }); const setHover (icon: any, value: any) { isHover[icon] value; }; // 数据 const tableData refany[]([]); const loading ref(false); const total ref(0); // 合并搜索参数 const searchParams reactive({ keyword: , // 邀请账户 order_by_profit: 0, // 累计分佣排序 0.正常 1.升 2.降 time_range: { start_time: null, end_time: null, }, page: { page_number: 1, page_size: 10, }, }); // 搜索配置 const searchItems: SearchItem[] [ { key: keyword, type: input, placeholder: t(channel.搜索邀请账户), span: 2, prefixIcon: icon-search, allowClear: true, }, { key: time_range, type: dateRange, placeholder: [t(public.startTime), t(public.endTime)], span: 6, }, ]; const getList async () { loading.value true; try { tableData.value []; const { data } await getRecordList(searchParams); console.log(---执行了列表接口---searchParams, searchParams.order_by_profit); // 关键修复把 total_profit 转成数字解决字符串排序错乱 tableData.value data?.list ? data.list.map((item) ({ ...item, total_profit: Number(item.total_profit), // 字符串转数字 })) : []; total.value data?.total || 0; loading.value false; // 查询的时候 total } catch { console.log(获取商户列表失败); } finally { loading.value false; } }; // 搜索变化处理 const handleSearchChange (key: string, value: any) { console.log(搜索字段 ${key} 变化:, value); // 可以在这里添加防抖搜索逻辑 searchParams[key] value; searchParams.page.page_number 1; getList(); }; interface PageChangeData { current: number; pageSize: number; } const handlePageChange (data: PageChangeData) { const { current, pageSize } data; console.log(页码变化:, 第${current}页, 每页${pageSize}条); searchParams.page.page_number current; searchParams.page.page_size pageSize; getList(); }; const handleSortChange (sorter: object) { // 重置到第一页并重新加载数据 searchParams.page.page_number 1; const newOrder sorter?.order || undefined; searchParams.order_by_profit newOrder ascend ? 1 : newOrder descend ? 2 : 0; getList(); // order_by_profit // 累计分拥排序 0.正常 1.升 2.降 }; const inviteRecordId ref(null); const handleMore (item: any, id: any) { console.log(更多:, item, id, id); // compone visibletype.value[item.visible] true; if (item.types add) { channelMerchantActions.value.push(item); // 新增费率 标题 } inviteRecordId.value id; }; const handClose () { Object.keys(visibletype.value).forEach((key) { visibletype.value[key] false; if (channelMerchantActions.value.length 2) { const removed channelMerchantActions.value.pop(); console.log(已删除最后一项:, removed); } }); }; const onCopy (content: any) { copyToClipboard(content); }; const invateDetail reactive({ invatecode: , recent_invite_count: , // 近7天的邀请人数 total_invite_count: , // 邀请的总人数 }); const getInviteCode async () { const { data } await inviteCode({}); invateDetail.invatecode data?.invite_code || ; }; const getinviteStats async () { const { data } await invitationStats({}); Object.assign(invateDetail, data); }; const router useRouter(); const onDetail (val: any) { console.log(--点击跳转---val, val); // 把 val 传递到 另一个页面 并且拿到 该参数 // 1. query 传参参数在URL中显示 router.push({ path: /channel/merchantRates, query: { account: JSON.stringify(val), // 对象需要序列化 // id: val.id, // name: val.name, // 或者直接传递整个对象 // ...val, }, }); }; onMounted(() { getList(); getInviteCode(); getinviteStats(); }); /script style scoped langless .invate-box { padding: 20px; height: 150; border-radius: 8px; opacity: 1; background: linear-gradient(90.7deg, #6d87f1 0%, #9728fb 102.97%); color: #fff; } .detail-border { border-bottom: 1px solid #9728fb; color: #9728fb; width: 60px; } /style核心修复代码(排查了很多问题前端未更新最新数据、排序方法使用错误等等。 )但实际问题是arco 的排序 根据number类型来转的因为我的那个字段后端返回是字符串比如说“1100” “200” 那么根据字符串他是认定“1100”的1在前。而不是根据数字的大小 200在前。。。// 关键修复把 total_profit 转成数字解决字符串排序错乱 tableData.value data?.list ? data.list.map((item) ({ ...item, total_profit: Number(item.total_profit), // 字符串转数字 })) : [];再贴一下我封装的表格哪里使用排序的传递方法吧这个是一直没有问题的。记录一下template div classsuper-table-container !-- 查询区域 -- div v-if$slots.search classtable-search-area slot namesearch / /div !-- 工具栏 (导出、批量操作、) -- div v-if$slots.toolbar || (selectedRows.length 0 $slots[batch-actions]) classtable-toolbar div classtoolbar-left slot nametoolbar :selected-rowsselectedRows / !-- 批量操作 选择了才显示 -- div v-ifselectedRows.length 0 $slots[batch-actions] classbatch-actions span classselected-count已选择 {{ selectedRows.length }} 项/span slot namebatch-actions :selected-rowsselectedRows / /div /div /div !-- 表格 -- a-table :columnsfinalColumns :datacurrentPageData :borderedbordered :hoverablehoverable :stripestripe :loadingloading :sizesize :show-headershowHeader :stickysticky :scrollscroll :row-keyrowKey :paginationfalse :expandablefinalExpandable :row-selectionfinalRowSelection :sort-directions[ascend, descend] expandhandleExpand selecthandleSelect select-allhandleSelectAll row-clickhandleRowClick sorter-changehandleSort !-- 动态列插槽 -- template v-forcolumn in slotColumns #[column.slotName]{ record, rowIndex } slot :namecolumn.slotName :recordrecord :indexrowIndex / /template !-- 展开行插槽 -- template #expanded-row-render{ record } slot nameexpanded-row :recordrecord / /template !-- 空状态 -- template #empty slot nameempty a-empty :descriptionemptyText / /slot /template /a-table !-- 分页展示区域 -- div v-ifisPagination classtable-pagination-area a-pagination :show-page-sizeshowPageSize show-jumper show-total :totaltotal :currentpaginationState.current changeonPageChange page-size-changeonPageSize / /div /div /template script setup langts import { computed, ref, reactive, watch, useSlots, nextTick } from vue; import type { TableColumn, ExpandableConfig, RowSelectionConfig, // PaginationConfig, } from /types/table; interface Props { // 数据 data?: any[]; loading?: boolean; rowKey?: string; total?: number; showPageSize?: boolean; // 列配置 columns: TableColumn[]; // 功能 expandable?: ExpandableConfig; rowSelection?: boolean | RowSelectionConfig; scroll?: { x?: number | string; y?: number | string }; // 样式 bordered?: boolean; hoverable?: boolean; stripe?: boolean; size?: mini | small | medium | large; showHeader?: boolean; sticky?: boolean | number; // 其他 emptyText?: string; isPagination?: boolean; // 分页相关仅用于内部计算 pageSize?: number; currentPage?: number; // 新增从父组件接收当前页码 // 排序相关 sortParams?: { field?: string; order?: ascend | descend | undefined; }; remoteSort?: boolean; // 是否启用远程排序 } const props withDefaults(definePropsProps(), { data: () [], loading: false, rowKey: key, scrollbar: true, bordered: false, hoverable: true, stripe: false, size: medium, showHeader: true, sticky: false, rowSelection: false, emptyText: 暂无数据, total: 0, showPageSize: true, currentPage: 1, pageSize: 10, isPagination: true, }); const emit defineEmits{ update:selectedKeys: [keys: (string | number)[]]; select: [selectedKeys: (string | number)[], record: any]; select-all: [checked: boolean]; page-change: [data: { current: number; pageSize: number }]; change: [filters: any, sorter: any]; expand: [expanded: boolean, record: any]; row-click: [record: any, index: number]; sort-change: [sorter: { field: string; order: ascend | descend | undefined }]; update:sortParams: [params: { field: string; order: ascend | descend | undefined }]; }(); const slots useSlots(); const hasExpandedRowSlot computed(() !!slots[expanded-row]); // 选中行 const selectedRowKeys ref(string | number)[]([]); const selectedRows computed(() { return props.data.filter((item) selectedRowKeys.value.includes(item[props.rowKey])); }); // 更新列配置添加排序状态 const finalColumns computed(() { return props.columns.map((column) { const columnConfig { ...column, key: column.key || column.dataIndex, }; // 手动干预排序状态 if (props.remoteSort props.sortParams column.sorter) { columnConfig.sortOrder props.sortParams.field column.dataIndex ? props.sortParams.order : undefined; } return columnConfig; }); }); // 需要插槽的列 const slotColumns computed(() { return props.columns .filter((column) column.slotName) .map((column) ({ dataIndex: column.dataIndex, slotName: column.slotName, })); }); // 分页状态从父组件接收 const paginationState reactive({ current: props.currentPage, pageSize: 10, total: props.total || props.data.length, }); // 是否等待合并的标志 const pendingUpdate ref(false); // 防抖触发事件确保短时间内多次变化只触发一次 const debouncedEmitPageChange () { if (pendingUpdate.value) return; pendingUpdate.value true; // 使用 nextTick 确保所有同步更新完成 nextTick(() { emit(page-change, { current: paginationState.current, pageSize: paginationState.pageSize, }); pendingUpdate.value false; }); }; // 监听父组件的页大小变化 watch( () props.pageSize, (newSize) { paginationState.pageSize newSize; // 处理 debouncedEmitPageChange(); }, ); // 监听总数据量变化 watch( () props.total, (newTotal) { if (newTotal 0) { paginationState.total newTotal; } }, ); // 监听本地数据变化 watch( () props.data, (newData) { if (!props.total || props.total 0) { paginationState.total newData.length; } }, { immediate: true }, ); // 当前页数据本地分页 const currentPageData computed(() { // 如果有 total 说明是远程分页直接使用传入的 data if (props.total props.total 0) { return [...props.data]; // 解构创建新数组触发表格重新渲染 } return props.data; }); // 行选择配置 const finalRowSelection computed(() { if (props.rowSelection false) return undefined; const baseConfig: any { type: checkbox, showCheckedAll: true, selectedRowKeys: selectedRowKeys.value, onChange: (selectedKeys: (string | number)[]) { selectedRowKeys.value selectedKeys; emit(update:selectedKeys, selectedKeys); }, }; if (props.rowSelection true) { return baseConfig; } return { ...baseConfig, ...props.rowSelection, }; }); // 展开配置 const finalExpandable computed(() { if (!props.expandable) return undefined; const config { ...props.expandable }; // 关键必须设置 expandedRowRender 函数否则不会显示展开图标 // 如果用户提供了 expandedRowRender就使用用户的 // 如果用户没提供但有插槽就设置一个返回插槽内容的函数 if (!config.expandedRowRender hasExpandedRowSlot.value) { config.expandedRowRender (record: any) { // 这里返回一个占位符实际内容由插槽渲染 return slots[expanded-row]!({ record }); }; } return config; }); // 排序接受官方事件参数 const handleSort (dataIndex: string, direction: ascend | descend | ) { const order direction || undefined; if (props.remoteSort) { emit(sort-change, { field: dataIndex, order: order }); } }; const handleExpand (expanded: boolean, record: any) { emit(expand, expanded, record); }; const handleSelect (selectedKeys: (string | number)[], record: any) { selectedRowKeys.value selectedKeys; emit(select, selectedKeys, record); emit(update:selectedKeys, selectedKeys); }; const handleSelectAll (checked: boolean) { if (checked) { selectedRowKeys.value props.data.map((item) item[props.rowKey]); } else { selectedRowKeys.value []; } emit(select-all, checked); emit(update:selectedKeys, selectedRowKeys.value); }; const handleRowClick (record: any, index: number) { emit(row-click, record, index); }; // 分页处理 const onPageChange (current: any) { // console.log(--分页改变---val, current); paginationState.current current; debouncedEmitPageChange(); }; const onPageSize (pageSize: any) { // console.log(页数大小改变:, pageSize); paginationState.pageSize pageSize; debouncedEmitPageChange(); }; // 暴露方法 defineExpose({ selectedRowKeys, selectedRows, paginationState, clearSelection: () { selectedRowKeys.value []; }, selectAll: () { selectedRowKeys.value props.data.map((item) item[props.rowKey]); }, }); /script script langts export default { name: ArcoTable }; /script style langless .super-table-container { width: 100%; } .table-search-area { margin-bottom: 16px; padding: 16px; background: #fafafa; } .table-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding: 12px 16px; background: #fff; border-radius: 6px; } .toolbar-left { display: flex; align-items: center; gap: 16px; } .batch-actions { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: #f2f3f5; border-radius: 4px; } .selected-count { color: #165dff; font-weight: 500; } .custom-pagination { margin-top: 16px; display: flex; justify-content: flex-end; } .arco-pagination-options .arco-select { min-width: 90px; } /* 分页 */ .table-pagination-area { display: flex; align-items: center; justify-content: end; margin-top: 16px; padding-top: 16px; /* border-top: 1px solid #f0f0f0; */ } /style