fix: Fix the issue of mysql status page empty data

Refs #8945

Author: igophper

frontend/src/views/database/mysql/setting/index.vue

@@ -174,9 +174,7 @@ const jumpToConf = async () => {
     loadMysqlConf();
 };
 
-const changeTab = (tab: string) => {
-    activeName.value = tab;
-
+watch(activeName, (tab) => {
     switch (tab) {
         case 'slowLog':
             nextTick(() => {
@@ -185,13 +183,19 @@ const changeTab = (tab: string) => {
             break;
         case 'status':
             nextTick(() => {
-                statusRef.value!.acceptParams({ type: props.type, database: props.database });
+                statusRef.value!.acceptParams({type: props.type, database: props.database});
             });
             break;
         case 'tuning':
-            loadVariables();
+            nextTick(() => {
+                loadVariables();
+            });
             break;
     }
+}, {immediate: true});
+
+const changeTab = (tab: string) => {
+    activeName.value = tab;
 };
 
 const onSubmitChangePort = async () => {