Browse Source

优化表格上右侧工具条(搜索按钮显隐&右侧样式凸出)
无搜索条件时可通过search隐藏搜索按钮,工具条组右侧样式超出5px(相对于底部表格),其父节点gutter代码生成默认10,此处也默认10,使工具组样式左右一致

(cherry picked from commit d4475d0e8d36a75980899246202ea420c3fad935)

abbfun 2 years ago
parent
commit
168d49fe0b
1 changed files with 19 additions and 2 deletions
  1. 19 2
      ruoyi-ui/src/components/RightToolbar/index.vue

+ 19 - 2
ruoyi-ui/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 size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
       </el-tooltip>
       <el-tooltip class="item" effect="dark" content="刷新" placement="top">
@@ -42,6 +42,23 @@ export default {
     columns: {
       type: Array,
     },
+    search: {
+      type: Boolean,
+      default: true,
+    },
+    gutter: {
+      type: Number,
+      default: 10,
+    },
+  },
+  computed: {
+    style() {
+      const ret = {};
+      if (this.gutter) {
+        ret.marginRight = `${this.gutter / 2}px`;
+      }
+      return ret;
+    }
   },
   created() {
     // 显隐列初始默认隐藏列