显隐列组件支持复选框弹出类型

src/components/RightToolbar/index.vue

@@ -8,7 +8,19 @@
         <el-button circle icon="Refresh" @click="refresh()" />
       </el-tooltip>
       <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
-        <el-button circle icon="Menu" @click="showColumn()" />
+        <el-button circle icon="Menu" @click="showColumn()" v-if="showColumnsType == 'transfer'"/>
+        <el-dropdown trigger="click" :hide-on-click="false" style="padding-left: 12px" v-if="showColumnsType == 'checkbox'">
+          <el-button size="mini" circle icon="Menu" />
+          <template #dropdown>
+            <el-dropdown-menu>
+              <template v-for="item in columns" :key="item.key">
+                <el-dropdown-item>
+                  <el-checkbox :checked="item.visible" @change="checkboxChange($event, item.label)" :label="item.label" />
+                </el-dropdown-item>
+              </template>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
       </el-tooltip>
     </el-row>
     <el-dialog :title="title" v-model="open" append-to-body>
@@ -24,17 +36,26 @@
 
 <script setup>
 const props = defineProps({
+  /* 是否显示检索条件 */
   showSearch: {
     type: Boolean,
     default: true,
   },
+  /* 显隐列信息 */
   columns: {
     type: Array,
   },
+  /* 是否显示检索图标 */
   search: {
     type: Boolean,
     default: true,
   },
+  /* 显隐列类型（transfer穿梭框、checkbox复选框） */
+  showColumnsType: {
+    type: String,
+    default: "checkbox",
+  },
+  /* 右外边距 */
   gutter: {
     type: Number,
     default: 10,
@@ -81,12 +102,20 @@ function showColumn() {
   open.value = true;
 }
 
+if (props.showColumnsType == 'transfer') {
   // 显隐列初始默认隐藏列
   for (let item in props.columns) {
     if (props.columns[item].visible === false) {
       value.value.push(parseInt(item));
     }
   }
+}
+
+// 勾选
+function checkboxChange(event, label) {
+  props.columns.filter(item => item.label == label)[0].visible = event;
+}
+
 </script>
 
 <style lang='scss' scoped>
@@ -98,8 +127,8 @@ for (let item in props.columns) {
 :deep(.el-transfer__button:first-child) {
   margin-bottom: 10px;
 }
-
-.my-el-transfer {
-  text-align: center;
+:deep(.el-dropdown-menu__item) {
+  line-height: 30px;
+  padding: 0 17px;
 }
 </style>