表格操作列

TableAction（@vben/components/table-action）是表格行操作按钮的标准封装：主按钮平铺、次要按钮收进下拉，内置权限码控制、二次确认、禁用、分割线、tooltip。

import { TableAction } from '@vben/components/table-action';
import type { ActionItem } from '@vben/components/table-action';

1. Props

Prop	类型	默认值	说明
`actions`	`ActionItem[]`	`[]`	平铺的主操作按钮
`dropDownActions`	`ActionItem[]`	`[]`	收进「更多」下拉的操作
`divider`	`boolean`	`true`	按钮之间是否显示分割线

插槽：more — 自定义下拉触发按钮的内容。

2. ActionItem 配置

ActionItem 继承 antdv ButtonProps，扩展字段：

字段	类型	说明
`label`	`string`	按钮文字
`icon`	`string`	图标（iconify 名称）
`onClick`	`Fn`	点击回调
`auth`	`string \| string[]`	权限码，无权限则不渲染
`mode`	`PermModeEnum`	多权限码时的判断模式（满足任一/全部）
`ifShow`	`boolean \| (action) => boolean`	业务条件控制显隐（如按行状态）
`disabled`	`boolean`	禁用
`popConfirm`	`PopConfirm`	气泡确认框（`title` + `confirm` 回调）
`confirm`	`AlertProps`	vben 内置确认弹窗（与 popConfirm 二选一）
`tooltip`	`string \| TooltipProps`	悬浮提示
`divider`	`boolean`	该按钮后是否显示分割线

3. 典型用法

表格工具栏（配合 vxe-table 的 toolbar-actions 插槽）：

<script setup lang="ts">
const actions: ActionItem[] = [
  {
    label: '新增',
    icon: 'ant-design:plus-outlined',
    auth: 'system:file:save',          // 权限码控制
    onClick: handleAdd,
  },
  {
    label: '批量删除',
    auth: 'system:file:delete',
    popConfirm: {
      title: '确认删除选中的文件？',
      confirm: handleBatchRemove,
    },
  },
];

const dropActions: ActionItem[] = [
  {
    label: '导入',
    icon: 'ant-design:import-outlined',
    auth: 'system:file:import',
    onClick: handleImport,
  },
  {
    label: '清理缓存',
    ifShow: () => isAdmin.value,        // 业务条件显隐
    confirm: { title: '确认清理缓存？', onConfirm: handleClearCache },
  },
];
</script>

<template>
  <TableAction :actions="actions" :drop-down-actions="dropActions">
    <template #more>
      <Button class="ml-2">
        更多操作
        <Icon icon="ant-design:down-outlined" />
      </Button>
    </template>
  </TableAction>
</template>

行内操作列同理，ifShow / disabled 可写成接收当前行的函数，实现「仅草稿状态显示提交按钮」这类按行控制。

权限码约定

auth 的权限码需与控制台「菜单管理」中配置的按钮权限码一致，格式 模块:表名:操作（如 system:dict:save）。权限判断由 @vben/access 的 useAccess().isPermission 完成。