Commit d4475d0e8d36a75980899246202ea420c3fad935

Authored by abbfun
Committed by Gitee
1 parent aff54ab5

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

无搜索条件时可通过search隐藏搜索按钮,工具条组右侧样式超出5px(相对于底部表格),其父节点gutter代码生成默认10,此处也默认10,使工具组样式左右一致
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 // 显隐列初始默认隐藏列
... ...