Commit d4475d0e8d36a75980899246202ea420c3fad935
Committed by
Gitee
1 parent
aff54ab5
优化表格上右侧工具条(搜索按钮显隐&右侧样式凸出)
无搜索条件时可通过search隐藏搜索按钮,工具条组右侧样式超出5px(相对于底部表格),其父节点gutter代码生成默认10,此处也默认10,使工具组样式左右一致
Showing
1 changed file
with
19 additions
and
2 deletions
ruoyi-ui/src/components/RightToolbar/index.vue
1 | 1 | <template> |
2 | - <div class="top-right-btn"> | |
2 | + <div class="top-right-btn" :style="style"> | |
3 | 3 | <el-row> |
4 | - <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top"> | |
4 | + <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top" v-if="search"> | |
5 | 5 | <el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" /> |
6 | 6 | </el-tooltip> |
7 | 7 | <el-tooltip class="item" effect="dark" content="刷新" placement="top"> |
... | ... | @@ -42,6 +42,23 @@ export default { |
42 | 42 | columns: { |
43 | 43 | type: Array, |
44 | 44 | }, |
45 | + search: { | |
46 | + type: Boolean, | |
47 | + default: true, | |
48 | + }, | |
49 | + gutter: { | |
50 | + type: Number, | |
51 | + default: 10, | |
52 | + }, | |
53 | + }, | |
54 | + computed: { | |
55 | + style() { | |
56 | + const ret = {}; | |
57 | + if (this.gutter) { | |
58 | + ret.marginRight = `${this.gutter / 2}px`; | |
59 | + } | |
60 | + return ret; | |
61 | + } | |
45 | 62 | }, |
46 | 63 | created() { |
47 | 64 | // 显隐列初始默认隐藏列 |
... | ... |