displayed list of columns in dropdown with checkbooxes

src/types/components.d.ts

@@ -7,6 +7,7 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     DateCalendar: typeof import('./../components/DateCalendar.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCollapse: typeof import('element-plus/es')['ElCollapse']
     ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']

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

@@ -15,7 +15,7 @@ limitations under the License. -->
 
 <template>
   <div class="log">
-    <div :class="{ 'd-flex': visibleColumns.length < 6 }" class="log-header">
+    <div :class="{ 'd-flex': visibleColumns.length < 6 }" class="log-header">      
       <template v-for="(item, index) in columns">
         <template v-if="item.isVisible">
           <div

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

@@ -15,53 +15,33 @@ limitations under the License. -->
 <template>
   <div class="flex-h log-wrapper">
     <div v-if="currentSearchTerm === 'column'" class="flex-h items-center mr-5">
-      <p style="margin-right: 10px">Select visible columns</p>
+      <!-- <p style="margin-right: 10px">Select visible columns</p> -->
-      <el-select
+      <el-dropdown :hide-on-click="false">
-        id="columnSelector"
+        <span class="el-dropdown-link">
-        v-model="selectedColumns"
+          Select visible columns<el-icon class="el-icon--right"
-        multiple
+            ><arrow-down
-        placeholder="Select"
+          /></el-icon>
-        style="width: 240px"
+        </span>
-        size="small"
+        <template #dropdown>
-        @change="hideTags"
+          <el-dropdown-menu class="dark">
-      >
+            <div class="">Test it all</div>
-        <el-option
+            <el-dropdown-item
-          v-for="item in logStore.serviceLogColumn"
+              v-for="item in logStore.serviceLogColumn"
-          :key="item.value"
+              :key="item.value"
-          :label="item.label"
+            >
-          :value="item.value"
+              <div
-        >
+                style="width: 100%"
-          <div
+                class="flex-h items-center justify-between"
-            style="justify-content: space-between"
-            class="flex-h items-center"
-          >
-            <span class="mr-5">{{ item.value }}</span>
-            <div class="flex-h items-center">
-              <el-tooltip
-                class="box-item"
-                effect="dark"
-                :content="item.isVisible ? 'Hide column' : 'Show Column'"
-                placement="right-start"
               >
-                <el-button
+                <span style="margin-left: 10px; display: block">{{
-                  v-if="item.isVisible"
+                  t(item.value)
-                  class="toggle-btn mx-3"
+                }}</span>
-                  @click="hideColumns(item)"
+                <el-checkbox :checked="item.isVisible" size="large" />
-                >
+              </div>
-                  <Icon iconSize="sm" iconName="cancel" />
+            </el-dropdown-item>
-                </el-button>
+          </el-dropdown-menu>
-                <el-button
+        </template>
-                  v-else
+      </el-dropdown>
-                  class="toggle-btn mx-3"
-                  @click="showColumns(item)"
-                >
-                  <Icon iconSize="sm" iconName="add" />
-                </el-button>
-              </el-tooltip>
-            </div>
-          </div>
-        </el-option>
-      </el-select>
       <el-button class="toggle-btn mx-3danger" @click="setSearchTerm('')">
         <Icon iconSize="sm" iconName="cancel" />
       </el-button>
@@ -269,6 +249,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
+import { ArrowDown } from "@element-plus/icons-vue";
 import { ref, reactive, watch, computed, onMounted } from "vue";
 import { useRoute } from "vue-router";
 import { useI18n } from "vue-i18n";
@@ -634,6 +615,12 @@ watch(
 );
 </script>
 <style lang="scss" scoped>
+.el-dropdown-link {
+  cursor: pointer;
+  color: var(--el-color-primary);
+  display: flex;
+  align-items: center;
+}
 // .log-wrapper {
 //   width: 600px;
 //   padding-left: 40px;
@@ -646,6 +633,9 @@ watch(
 .items-center {
   align-items: center;
 }
+.justify-between {
+  justify-content: space-between;
+}
 .row {
   margin-bottom: 5px;
 }