🚀 行

src/components/Table/src/components/TableAction.vue

@@ -25,14 +25,14 @@
     >
       <slot name="more"/>
       <a-button v-if="!$slots.more" type="link" size="small">
-        <MoreOutlined class="icon-more"/>
+        更多<Icon icon="mdi-light:chevron-down"/>
       </a-button>
     </Dropdown>
   </div>
 </template>
+
 <script lang="ts">
   import { defineComponent, PropType, computed, toRaw, unref } from 'vue';
-  import { MoreOutlined } from '@ant-design/icons-vue';
   import { Divider, Tooltip, TooltipProps } from 'ant-design-vue';
   import Icon from '/@/components/Icon/index';
   import { ActionItem, TableActionType } from '/@/components/Table';
@@ -47,7 +47,7 @@
 
   export default defineComponent({
     name: 'TableAction',
-    components: { Icon, PopConfirmButton, Divider, Dropdown, MoreOutlined, Tooltip },
+    components: { Icon, PopConfirmButton, Divider, Dropdown, Tooltip },
     props: {
       actions: {
         type: Array as PropType<ActionItem[]>,
@@ -148,3 +148,10 @@
     },
   });
 </script>
+
+<style lang="less">
+@prefix-cls: ~'@{namespace}-basic-table-action';
+.@{prefix-cls} {
+  height: 22px;
+}
+</style>

src/views/system/user/index.vue

@@ -26,41 +26,43 @@
         >删除用户</a-button>
       </template>
       <template #action="{ record }">
-        <TableAction :actions="[
-          {
-            label: '加入黑名单',
-            icon: 'fa6-regular:pen-to-square',
-            onClick: handleBlacklist.bind(null, record)
-          },
-          {
-            label: '加入白名单',
-            icon: 'fa6-regular:pen-to-square',
-            onClick: handleWhitelist.bind(null, record)
-          },
-          {
-            label: '推送申请',
-            icon: 'fa6-regular:pen-to-square',
-            onClick: handlePushAdd.bind(null, record)
-          },
-          {
-            label: '重置密码',
-            icon: 'fa6-brands:battle-net',
-            auth: ['user_reset'],
-            onClick: handleResetPassword.bind(null, record),
-          },
-          {
-            label: '编辑',
-            icon: 'fa6-regular:pen-to-square',
-            auth: ['user_edit'],
-            onClick: handleEdit.bind(null, record)
-          },
-          {
-            label: '删除',
-            icon: 'ant-design:delete-outlined',
-            color: 'error',
-            auth: ['user_del'],
-            onClick: handleDel.bind(null, record)
-          }]"
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              icon: 'fa6-regular:pen-to-square',
+              auth: ['user_edit'],
+              onClick: handleEdit.bind(null, record)
+            },
+            {
+              label: '删除',
+              icon: 'ant-design:delete-outlined',
+              color: 'error',
+              auth: ['user_del'],
+              onClick: handleDel.bind(null, record)
+            }]"
+          :dropDownActions="[
+            {
+              label: '加入黑名单',
+              icon: 'fa6-regular:pen-to-square',
+              onClick: handleBlacklist.bind(null, record)
+            },
+            {
+              label: '加入白名单',
+              icon: 'fa6-regular:pen-to-square',
+              onClick: handleWhitelist.bind(null, record)
+            },
+            {
+              label: '推送申请',
+              icon: 'fa6-regular:pen-to-square',
+              onClick: handlePushAdd.bind(null, record)
+            },
+            {
+              label: '重置密码',
+              icon: 'fa6-brands:battle-net',
+              auth: ['user_reset'],
+              onClick: handleResetPassword.bind(null, record),
+            }]"
         />
       </template>
     </BasicTable>
@@ -90,6 +92,7 @@
   import {addPushUserManage} from '/@/api/platform/common/controller/pushUserManage';
   import {useUserStore} from '/@/store/modules/user';
   import {addPushPassList} from '/@/api/platform/common/controller/pushPassList';
+  import { MoreOutlined } from '@ant-design/icons-vue';
 
   const userStore = useUserStore();
   const userInfoStore = userStore.getUserInfo;
@@ -110,7 +113,8 @@
       DeptTree,
       TableAction,
       UserModal,
-      ResetPwdModal
+      ResetPwdModal,
+      MoreOutlined
     },
     setup() {
 
@@ -147,7 +151,7 @@
         showIndexColumn: false,
         searchInfo: state.searchInfo,
         actionColumn: {
-          width: 550,
+          width: 240,
           title: '操作',
           dataIndex: 'action',
           slots: { customRender: 'action' },
@@ -274,7 +278,8 @@
         handleSelectionChange,
         handleRefreshTable,
         handleSelect,
-        handleResetPassword
+        handleResetPassword,
+        MoreOutlined
       };
     }
   });