src/components/ui/VnPaginate.vue

@@ -74,8 +74,11 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    mapKey: {
+        type: String,
+        default: 'id',
+    },
 });
-
 const emit = defineEmits(['onFetch', 'onPaginate', 'onChange']);
 const isLoading = ref(false);
 const mounted = ref(false);
@@ -84,7 +87,6 @@ const pagination = ref({
     rowsPerPage: props.limit,
     page: 1,
 });
-
 const arrayData = useArrayData(props.dataKey, {
     url: props.url,
     filter: props.filter,
@@ -96,9 +98,10 @@ const arrayData = useArrayData(props.dataKey, {
     exprBuilder: props.exprBuilder,
     keepOpts: props.keepOpts,
     searchUrl: props.searchUrl,
+    mapKey: props.mapKey,
 });
 const store = arrayData.store;
-
+console.log('store', store);
 onMounted(async () => {
     if (props.autoLoad && !store.data?.length) await fetch();
     mounted.value = true;

src/composables/useArrayData.js

@@ -49,6 +49,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
             'exprBuilder',
             'searchUrl',
             'navigate',
+            'mapKey',
         ];
         if (typeof userOptions === 'object') {
             for (const option in userOptions) {
@@ -294,7 +295,7 @@ export function useArrayData(key = useRoute().meta.moduleName, userOptions) {
 
     function mapData(data) {
         data.forEach((row) => {
-            const key = row.id;
+            const key = row[store.mapKey];
             const val = { ...row, key };
 
             if (store.map.has(key)) {

src/stores/useArrayDataStore.js

@@ -17,6 +17,7 @@ export const useArrayDataStore = defineStore('arrayDataStore', () => {
         searchUrl: 'params',
         navigate: null,
         page: 1,
+        mapKey: 'id',
     };
 
     function get(key) {