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

ruoyi-ui/src/components/RightToolbar/index.vue

@@ -8,7 +8,17 @@
         <el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
       </el-tooltip>
       <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
-        <el-button size="mini" circle icon="el-icon-menu" @click="showColumn()" />
+        <el-button size="mini" circle icon="el-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="el-icon-menu" />
+          <el-dropdown-menu slot="dropdown">
+            <template v-for="item in columns">
+              <el-dropdown-item :key="item.key">
+                <el-checkbox :checked="item.visible" @change="checkboxChange($event, item.label)" :label="item.label" />
+              </el-dropdown-item>
+            </template>
+          </el-dropdown-menu>
+        </el-dropdown>
       </el-tooltip>
     </el-row>
     <el-dialog :title="title" :visible.sync="open" append-to-body>
@@ -35,17 +45,26 @@ export default {
     };
   },
   props: {
+    /* 是否显示检索条件 */
     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,
@@ -61,10 +80,12 @@ export default {
     }
   },
   created() {
-    // 显隐列初始默认隐藏列
-    for (let item in this.columns) {
-      if (this.columns[item].visible === false) {
-        this.value.push(parseInt(item));
+    if (this.showColumnsType == 'transfer') {
+      // 显隐列初始默认隐藏列
+      for (let item in this.columns) {
+        if (this.columns[item].visible === false) {
+          this.value.push(parseInt(item));
+        }
       }
     }
   },
@@ -88,6 +109,10 @@ export default {
     showColumn() {
       this.open = true;
     },
+    // 勾选
+    checkboxChange(event, label) {
+      this.columns.filter(item => item.label == label)[0].visible = event;
+    }
   },
 };
 </script>