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

YunaiV
1 parent 0e903df3
Showing 1 changed file with 26 additions and 9 deletions
yudao-ui-admin/src/components/RightToolbar/index.vue
 <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">
@@ -13,10 +13,10 @@
     </el-row>
     <el-dialog :title="title" :visible.sync="open" append-to-body>
       <el-transfer
-        :titles="['显示', '隐藏']"
-        v-model="value"
-        :data="columns"
-        @change="dataChange"
+          :titles="['显示', '隐藏']"
+          v-model="value"
+          :data="columns"
+          @change="dataChange"
       ></el-transfer>
     </el-dialog>
   </div>
@@ -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() {
     // 显隐列初始默认隐藏列
@@ -75,13 +92,13 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-:deep(.el-transfer__button) {
+::v-deep .el-transfer__button {
   border-radius: 50%;
   padding: 12px;
   display: block;
-  margin-left: 0;
+  margin-left: 0px;
 }
-:deep(.el-transfer__button:first-child) {
+::v-deep .el-transfer__button:first-child {
   margin-bottom: 10px;
 }
 </style>