fix(table-action): fixed icon margin without label

修复当没有label时，icon没有在按钮内居中的问题
vbenjs · Jul 15, 2021 · dc51e6a · dc51e6a
1 parent 4b46a84
commit dc51e6a
Showing 1 changed file with 14 additions and 4 deletions.
diff --git a/src/components/Table/src/components/TableAction.vue b/src/components/Table/src/components/TableAction.vue
@@ -3,13 +3,23 @@
     <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" v-if="action.icon" />
-          {{ action.label }}
+          <Icon
+            :icon="action.icon"
+            :class="{ 'mr-1': action.label }"
+            :style="{ margin: action.label ? '' : 'auto !important' }"
+            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" v-if="action.icon" />
-        {{ action.label }}
+        <Icon
+          :icon="action.icon"
+          :class="{ 'mr-1': action.label }"
+          :style="{ margin: action.label ? '' : 'auto !important' }"
+          v-if="action.icon"
+        />
+        <template v-if="action.label">{{ action.label }}</template>
       </PopConfirmButton>
       <Divider
         type="vertical"