From 99e66bf11c38ebe2f21f73b956918468eae4929c Mon Sep 17 00:00:00 2001 From: RuoYi <yzz_ivy@163.com> Date: 星期日, 30 六月 2024 08:02:22 +0800 Subject: [PATCH] 若依 3.8.8 --- ruoyi-ui/src/components/RightToolbar/index.vue | 56 +++++++++++++++++++++++++++++++++++++++++++++++++------- 1 files changed, 49 insertions(+), 7 deletions(-) diff --git a/ruoyi-ui/src/components/RightToolbar/index.vue b/ruoyi-ui/src/components/RightToolbar/index.vue index 976974e..d3d4252 100644 --- a/ruoyi-ui/src/components/RightToolbar/index.vue +++ b/ruoyi-ui/src/components/RightToolbar/index.vue @@ -1,14 +1,24 @@ <template> - <div class="top-right-btn"> + <div class="top-right-btn" :style="style"> <el-row> - <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top"> + <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top" v-if="search"> <el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" /> </el-tooltip> <el-tooltip class="item" effect="dark" content="刷新" placement="top"> <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,19 +45,47 @@ }; }, 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, + }, + }, + computed: { + style() { + const ret = {}; + if (this.gutter) { + ret.marginRight = `${this.gutter / 2}px`; + } + return ret; + } }, 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)); + } } } }, @@ -71,6 +109,10 @@ showColumn() { this.open = true; }, + // 勾选 + checkboxChange(event, label) { + this.columns.filter(item => item.label == label)[0].visible = event; + } }, }; </script> -- Gitblit v1.9.2