From 3d29929b570ca3a00e933816eb9bc0934399d469 Mon Sep 17 00:00:00 2001
From: RuoYi <yzz_ivy@163.com>
Date: 星期五, 29 七月 2022 20:38:55 +0800
Subject: [PATCH] 优化表格上右侧工具条（搜索按钮显隐&右侧样式凸出）
---
src/components/RightToolbar/index.vue | 27 +++++++++++++++++++++------
1 files changed, 21 insertions(+), 6 deletions(-)
diff --git a/src/components/RightToolbar/index.vue b/src/components/RightToolbar/index.vue
index 78caa84..9fd0bb0 100644
--- a/src/components/RightToolbar/index.vue
+++ b/src/components/RightToolbar/index.vue
@@ -1,14 +1,14 @@
<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-button size="mini" circle icon="Search" @click="toggleSearch()" />
+ <el-tooltip class="item" effect="dark" :content="showSearch ? '闅愯棌鎼滅储' : '鏄剧ず鎼滅储'" placement="top" v-if="search">
+ <el-button circle icon="Search" @click="toggleSearch()" />
</el-tooltip>
<el-tooltip class="item" effect="dark" content="鍒锋柊" placement="top">
- <el-button size="mini" circle icon="Refresh" @click="refresh()" />
+ <el-button circle icon="Refresh" @click="refresh()" />
</el-tooltip>
<el-tooltip class="item" effect="dark" content="鏄鹃殣鍒�" placement="top" v-if="columns">
- <el-button size="mini" circle icon="Menu" @click="showColumn()" />
+ <el-button circle icon="Menu" @click="showColumn()" />
</el-tooltip>
</el-row>
<el-dialog :title="title" v-model="open" append-to-body>
@@ -31,6 +31,14 @@
columns: {
type: Array,
},
+ search: {
+ type: Boolean,
+ default: true,
+ },
+ gutter: {
+ type: Number,
+ default: 10,
+ },
})
const emits = defineEmits(['update:showSearch', 'queryTable']);
@@ -41,6 +49,14 @@
const title = ref("鏄剧ず/闅愯棌");
// 鏄惁鏄剧ず寮瑰嚭灞�
const open = ref(false);
+
+const style = computed(() => {
+ const ret = {};
+ if (props.gutter) {
+ ret.marginRight = `${props.gutter / 2}px`;
+ }
+ return ret;
+});
// 鎼滅储
function toggleSearch() {
@@ -76,7 +92,6 @@
<style lang='scss' scoped>
:deep(.el-transfer__button) {
border-radius: 50%;
- padding: 12px;
display: block;
margin-left: 0px;
}
--
Gitblit v1.9.3