From 15b2acbcd5b4fdd26ba596425883c01ce5502e09 Mon Sep 17 00:00:00 2001
From: RuoYi <yzz_ivy@163.com>
Date: 星期五, 01 十二月 2023 12:02:01 +0800
Subject: [PATCH] 显隐列组件支持复选框弹出类型
---
src/components/RightToolbar/index.vue | 47 ++++++++++++++++++++++++++++++++++++++---------
1 files changed, 38 insertions(+), 9 deletions(-)
diff --git a/src/components/RightToolbar/index.vue b/src/components/RightToolbar/index.vue
index 9fd0bb0..9c453f2 100644
--- a/src/components/RightToolbar/index.vue
+++ b/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绌挎妗嗐�乧heckbox澶嶉�夋锛� */
+ showColumnsType: {
+ type: String,
+ default: "checkbox",
+ },
+ /* 鍙冲杈硅窛 */
gutter: {
type: Number,
default: 10,
@@ -81,12 +102,20 @@
open.value = true;
}
-// 鏄鹃殣鍒楀垵濮嬮粯璁ら殣钘忓垪
-for (let item in props.columns) {
- if (props.columns[item].visible === false) {
- value.value.push(parseInt(item));
+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 @@
: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>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3