优化表格上右侧工具条(搜索按钮显隐&右侧样式凸出)

无搜索条件时可通过search隐藏搜索按钮,工具条组右侧样式超出5px(相对于底部表格),其父节点gutter代码生成默认10,此处也默认10,使工具组样式左右一致
master
abbfun 2 years ago committed by Gitee
parent aff54ab5fe
commit d4475d0e8d
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
  1. 21
      ruoyi-ui/src/components/RightToolbar/index.vue

@ -1,7 +1,7 @@
<template> <template>
<div class="top-right-btn"> <div class="top-right-btn" :style="style">
<el-row> <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-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
</el-tooltip> </el-tooltip>
<el-tooltip class="item" effect="dark" content="刷新" placement="top"> <el-tooltip class="item" effect="dark" content="刷新" placement="top">
@ -42,6 +42,23 @@ export default {
columns: { columns: {
type: Array, 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() { created() {
// //

Loading…
Cancel
Save