fix(table-action): fix circle button style

修复table-action组件内的圆形按钮内容没有居中的问题
vbenjs · Jul 15, 2021 · db7254a · db7254a
1 parent dc51e6a
commit db7254a
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 13 deletions.
diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
@@ -13,7 +13,9 @@
   - 新增`headerTop`插槽
   - 修复操作列的按钮在 disabled 状态下的颜色显示
 - **AppSearch** 修复可能会搜索隐藏菜单的问题
-- **TableAction** 仅在 action.tooltip 存在的情况下 才包裹 Tooltip 组件
+- **TableAction**
+  - 仅在 action.tooltip 存在的情况下 才包裹 Tooltip 组件
+  - 修复组件内的圆形按钮内容没有居中的问题
 - **BasicUpload** 修复处理非`array`值时报错的问题
 - **Form** 修复`FormItem`的`suffix`插槽样式问题
 - **Menu**

diff --git a/src/components/Table/src/components/TableAction.vue b/src/components/Table/src/components/TableAction.vue
@@ -3,22 +3,12 @@
     <template v-for="(action, index) in getActions" :key="`${index}-${action.label}`">
       <Tooltip v-if="action.tooltip" v-bind="getTooltip(action.tooltip)">
         <PopConfirmButton v-bind="action">
-          <Icon
-            :icon="action.icon"
-            :class="{ 'mr-1': action.label }"
-            :style="{ margin: action.label ? '' : 'auto !important' }"
-            v-if="action.icon"
-          />
+          <Icon :icon="action.icon" :class="{ 'mr-1': !!action.label }" v-if="action.icon" />
           <template v-if="action.label">{{ action.label }}</template>
         </PopConfirmButton>
       </Tooltip>
       <PopConfirmButton v-else v-bind="action">
-        <Icon
-          :icon="action.icon"
-          :class="{ 'mr-1': action.label }"
-          :style="{ margin: action.label ? '' : 'auto !important' }"
-          v-if="action.icon"
-        />
+        <Icon :icon="action.icon" :class="{ 'mr-1': !!action.label }" v-if="action.icon" />
         <template v-if="action.label">{{ action.label }}</template>
       </PopConfirmButton>
       <Divider
@@ -192,6 +182,12 @@
       }
     }
 
+    button.ant-btn-circle {
+      span {
+        margin: auto !important;
+      }
+    }
+
     .ant-divider,
     .ant-divider-vertical {
       margin: 0 2px;