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

RuoYi

2022-07-29 3d29929b570ca3a00e933816eb9bc0934399d469

 src/components/RightToolbar/index.vue

@@ -1,14 +1,14 @@
<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-button size="mini" circle icon="Search" @click="toggleSearch()" />

      <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">

        <el-button size="mini" circle icon="Refresh" @click="refresh()" />

        <el-button circle icon="Refresh" @click="refresh()" />

      </el-tooltip>

      <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">

        <el-button size="mini" circle icon="Menu" @click="showColumn()" />

        <el-button circle icon="Menu" @click="showColumn()" />

      </el-tooltip>

    </el-row>

    <el-dialog :title="title" v-model="open" append-to-body>

@@ -31,6 +31,14 @@
  columns: {

    type: Array,

  },

  search: {

    type: Boolean,

    default: true,

  },

  gutter: {

    type: Number,

    default: 10,

  },

})



const emits = defineEmits(['update:showSearch', 'queryTable']);

@@ -41,6 +49,14 @@
const title = ref("显示/隐藏");

// 是否显示弹出层

const open = ref(false);



const style = computed(() => {

  const ret = {};

  if (props.gutter) {

    ret.marginRight = `${props.gutter / 2}px`;

  }

  return ret;

});



// 搜索

function toggleSearch() {

@@ -76,7 +92,6 @@
<style lang='scss' scoped>

:deep(.el-transfer__button) {

  border-radius: 50%;

  padding: 12px;

  display: block;

  margin-left: 0px;

}