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 | 20 ++++++++++++++++++--
1 files changed, 18 insertions(+), 2 deletions(-)
diff --git a/src/components/RightToolbar/index.vue b/src/components/RightToolbar/index.vue
index fcdd1a6..9fd0bb0 100644
--- a/src/components/RightToolbar/index.vue
+++ b/src/components/RightToolbar/index.vue
@@ -1,7 +1,7 @@
<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 circle icon="Search" @click="toggleSearch()" />
</el-tooltip>
<el-tooltip class="item" effect="dark" content="鍒锋柊" placement="top">
@@ -31,6 +31,14 @@
columns: {
type: Array,
},
+ search: {
+ type: Boolean,
+ default: true,
+ },
+ gutter: {
+ type: Number,
+ default: 10,
+ },
})
const emits = defineEmits(['update:showSearch', 'queryTable']);
@@ -42,6 +50,14 @@
// 鏄惁鏄剧ず寮瑰嚭灞�
const open = ref(false);
+const style = computed(() => {
+ const ret = {};
+ if (props.gutter) {
+ ret.marginRight = `${props.gutter / 2}px`;
+ }
+ return ret;
+});
+
// 鎼滅储
function toggleSearch() {
emits("update:showSearch", !props.showSearch);
--
Gitblit v1.9.3