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

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,12 +80,14 @@ export default {
     }
   },
   created() {
+    if (this.showColumnsType == 'transfer') {
       // 显隐列初始默认隐藏列
       for (let item in this.columns) {
         if (this.columns[item].visible === false) {
           this.value.push(parseInt(item));
         }
       }
+    }
   },
   methods: {
     // 搜索
@@ -88,6 +109,10 @@ export default {
     showColumn() {
       this.open = true;
     },
+    // 勾选
+    checkboxChange(event, label) {
+      this.columns.filter(item => item.label == label)[0].visible = event;
+    }
   },
 };
 </script>