浏览代码

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

修复当没有label时,icon没有在按钮内居中的问题
无木 3 年之前
父节点
当前提交
dc51e6a8d4
共有 1 个文件被更改,包括 14 次插入4 次删除
  1. 14 4
      src/components/Table/src/components/TableAction.vue

+ 14 - 4
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"