Added feature to show all and hide all

src/store/modules/log.ts

@@ -64,16 +64,21 @@ export const logStore = defineStore({
     showColumns(columnsLabel: string) {
       this.serviceLogColumn.forEach((col: any) => {
         if (columnsLabel === col.value) {
-          col.isVisible = true
+          col.isVisible = true;
         }
-      })
+      });
     },
     hideColumns(columnsLabel: string) {
       this.serviceLogColumn.forEach((col: any) => {
         if (columnsLabel === col.value) {
-          col.isVisible = false
+          col.isVisible = false;
         }
-      })
+      });
+    },
+    toggleAllColumns(status: boolean) {
+      this.serviceLogColumn.forEach((col: any) => {
+        col.isVisible = status;
+      });
     },
     setLogCondition(data: any) {
       this.conditions = { ...this.conditions, ...data };

src/views/dashboard/related/log/Header.vue

@@ -29,8 +29,9 @@ limitations under the License. -->
                 style="width: 100%"
                 class="flex-h items-center justify-between"
               >
-                <el-checkbox :checked="showAllColumns" size="large" />
-                <span style="margin-right: 10px">Show All</span>
+                <!-- <el-checkbox v-model="showAllColumns" size="large"> -->
+                  <span style="margin-right: 10px">Show All</span>
+                <!-- </el-checkbox> -->
               </div>
             </el-dropdown-item>
             <el-dropdown-item
@@ -623,6 +624,12 @@ watch(
     }
   }
 );
+watch( 
+  () => showAllColumns.value, 
+  (newVal, oldVal) => {
+   console.log("New:", newVal, "Old:", oldVal)
+   logStore.toggleAllColumns(newVal)
+})
 </script>
 <style lang="scss" scoped>
 .dropdownSelector {