Fix playerlist table size changing when current instance empty

src/stores/instance.js

@@ -1,4 +1,4 @@
-import { reactive, ref, watch } from 'vue';
+import { reactive, watch, ref, computed } from 'vue';
 import { ElMessage } from 'element-plus';
 import { defineStore } from 'pinia';
 import { useI18n } from 'vue-i18n';
@@ -81,23 +81,28 @@ export const useInstanceStore = defineStore('Instance', () => {
 
     const instanceJoinHistory = ref(new Map());
 
-    const currentInstanceUserList = ref({
-        data: [],
-        tableProps: {
-            stripe: true,
-            size: 'small',
-            defaultSort: {
-                prop: 'timer',
-                order: 'descending'
-            }
-        },
-        layout: 'table'
+    const currentInstanceUsersData = ref([]);
+    const currentInstanceUsersTable = computed(() => {
+        return reactive({
+            data: currentInstanceWorld.value.ref.id
+                ? currentInstanceUsersData.value
+                : [],
+            tableProps: {
+                stripe: true,
+                size: 'small',
+                defaultSort: {
+                    prop: 'timer',
+                    order: 'descending'
+                }
+            },
+            layout: 'table'
+        });
     });
 
     watch(
         () => watchState.isLoggedIn,
         (isLoggedIn) => {
-            currentInstanceUserList.value.data = [];
+            currentInstanceUsersTable.value.data = [];
             instanceJoinHistory.value = new Map();
             previousInstancesInfoDialogVisible.value = false;
             cachedInstances.clear();
@@ -1188,7 +1193,7 @@ export const useInstanceStore = defineStore('Instance', () => {
                 }
             }
         }
-        currentInstanceUserList.value.data = users;
+        currentInstanceUsersTable.value.data = users;
     }
 
     // $app.methods.instanceQueueClear = function () {
@@ -1210,7 +1215,7 @@ export const useInstanceStore = defineStore('Instance', () => {
         previousInstancesInfoDialogVisible,
         previousInstancesInfoDialogInstanceId,
         instanceJoinHistory,
-        currentInstanceUserList,
+        currentInstanceUsersTable,
 
         applyInstance,
         updateCurrentInstanceWorld,

src/views/PlayerList/PlayerList.vue

@@ -189,7 +189,7 @@
 
             <div class="current-instance-table">
                 <DataTable
-                    v-bind="currentInstanceWorld.ref.id ? currentInstanceUserList : {}"
+                    v-bind="currentInstanceUsersTable"
                     style="margin-top: 10px; cursor: pointer"
                     @row-click="selectCurrentInstanceRow">
                     <el-table-column :label="t('table.playerList.avatar')" width="70" prop="photo">
@@ -439,7 +439,7 @@
     const { showWorldDialog } = useWorldStore();
     const { lastLocation } = storeToRefs(useLocationStore());
     const { currentInstanceLocation, currentInstanceWorld } = storeToRefs(useInstanceStore());
-    const { currentInstanceUserList, getCurrentInstanceUserList } = useInstanceStore();
+    const { currentInstanceUsersTable, getCurrentInstanceUserList } = useInstanceStore();
     const { menuActiveIndex } = storeToRefs(useUiStore());
     const { showFullscreenImageDialog } = useGalleryStore();
     const { currentUser } = storeToRefs(useUserStore());