can hide columns from selected input

src/store/modules/log.ts

@@ -1,4 +1,3 @@
-import { serviceLogColumn } from '@/types/log-column';
 /**
  * Licensed to the Apache Software Foundation (ASF) under one or more
  * contributor license agreements.  See the NOTICE file distributed with
@@ -63,10 +62,9 @@ export const logStore = defineStore({
   }),
   actions: {
     hideColumns(columnsLabel: string[]) {
-      console.log(columnsLabel, this.serviceLogColumn)
       // TODO: add a parameter column type too
-      this.serviceLogColumn.map((col: any) => {
+      this.serviceLogColumn.forEach((col: any) => {
-        if (columnsLabel.includes(col.label)) {
+        if (columnsLabel.includes(col.value)) {
           col.isVisible = false
         }
       })

src/views/dashboard/related/components/LogTable/Index.vue

@@ -91,7 +91,11 @@ const showDetail = ref<boolean>(false);
 const dragger = ref<Nullable<HTMLSpanElement>>(null);
 // const method = ref<number>(380);
 // props.type === "browser" ? BrowserLogConstants : ServiceLogConstants;
-const columns = ref<any[]> (useLogStore.serviceLogColumn);
+const columns = ref<any[]>(
+  props.type === "browser"
+    ? useLogStore.browserLogColumn
+    : useLogStore.serviceLogColumn
+);
 // const portalVisibleDefaultCols:string[] = ['Service', 'Instance','Content']
 
 const visibleColumns = computed(() =>

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

@@ -15,7 +15,7 @@ limitations under the License. -->
 <template>
   <div class="flex-h log-wrapper">
     <div class="flex-h items-center mr-5">
-      <p style="margin-left: 10px">Select visible columns</p>
+      <p style="margin-right: 10px">Select visible columns</p>
       <el-select
         v-model="selectedColumns"
         multiple
@@ -29,11 +29,36 @@ limitations under the License. -->
           :key="item.value"
           :label="item.label"
           :value="item.value"
-        />
+        >
+          <span class="mr-5">{{ item.value }}</span>
+          <Icon v-if="item.isVisible" iconSize="sm" iconName="cancel" />
+          <Icon v-else iconSize="sm" iconName="add" />
+        </el-option>
       </el-select>
+      <div class="flex-h items-center" v-if="selectedColumns.length">
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          content="Add selected columns"
+          placement="bottom-start"
+        >
           <el-button class="toggle-btn mx-3" @click="setVisbleColumn">
-        <Icon iconSize="sm" iconName="timeline" />
+            <Icon iconSize="sm" iconName="save" />
           </el-button>
+        </el-tooltip>
+
+        <el-tooltip
+          class="box-item"
+          effect="dark"
+          content="Remove selected columns"
+          placement="bottom-start"
+        >
+          <el-button class="toggle-btn mx-3" @click="hideColumn">
+            <Icon iconSize="sm" iconName="cancel" />
+          </el-button>
+        </el-tooltip>
+
+      </div>
     </div>
     <div v-if="!currentSearchTerm.length" class="flex-h items-center">
       <div v-for="(item, index) in arrayOfFilters" :key="index">
@@ -316,6 +341,10 @@ function setVisbleColumn() {
   });
   console.log(cols, [...logStore.serviceLogColumn]);
 }
+function hideColumn() {
+  logStore.hideColumns(selectedColumns.value)
+  selectedColumns.value = []
+}
 async function init() {
   const resp = await logStore.getLogsByKeywords();