Vben TableAction 表格操作

TableAction 用于在表格操作列中渲染一组操作按钮，参考 vben2 的 TableAction 设计。基于 shadcn-ui 构建，支持权限控制、气泡确认、提示、下拉「更多」、分割线等能力，可在表格内外任意场景复用。

如果文档内没有覆盖到你需要的细节，可以结合在线示例一起查看。

写在前面

组件本身不依赖任何业务逻辑（不直接读取权限 store），权限通过注入 hasPermission 实现，从而保持核心层零耦合、可跨框架复用。在 vxe-table 中推荐通过列插槽（slots: { default: 'action' }）在页面里渲染，不改变表格原有的渲染机制。:::

基础用法

通过 actions 传入操作项数组，每项包含 text、onClick 等；danger 标记危险操作，divider 显示按钮间分割线。

<script lang="ts" setup>
import type { ActionItem } from '@vben/common-ui';

import { ref } from 'vue';

import { VbenTableAction } from '@vben/common-ui';

const last = ref('无');

const actions: ActionItem[] = [
  { key: 'edit', onClick: () => (last.value = '编辑'), text: '编辑' },
  { key: 'detail', onClick: () => (last.value = '详情'), text: '详情' },
  {
    danger: true,
    key: 'delete',
    onClick: () => (last.value = '删除'),
    text: '删除',
  },
];
</script>
<template>
  <div>
    <VbenTableAction :actions="actions" align="start" divider />
    <p style="margin-top: 8px; font-size: 13px; opacity: 0.7">
      最近点击：{{ last }}
    </p>
  </div>
</template>

提示

通过 tooltip 为操作项添加提示，支持字符串或 { content, side } 配置。

<script lang="ts" setup>
import type { ActionItem } from '@vben/common-ui';

import { VbenTableAction } from '@vben/common-ui';

const actions: ActionItem[] = [
  { key: 'edit', text: '编辑', tooltip: '编辑这一行' },
  {
    key: 'detail',
    text: '详情',
    tooltip: { content: '查看详情', side: 'top' },
  },
];
</script>
<template>
  <VbenTableAction :actions="actions" align="start" />
</template>

气泡确认

通过 popConfirm 开启点击前的气泡确认，常用于删除等危险操作。

<script lang="ts" setup>
import type { ActionItem } from '@vben/common-ui';

import { ref } from 'vue';

import { VbenTableAction } from '@vben/common-ui';

const last = ref('无');

const actions: ActionItem[] = [
  { key: 'edit', onClick: () => (last.value = '编辑'), text: '编辑' },
  {
    danger: true,
    key: 'delete',
    popConfirm: {
      cancelText: '取消',
      confirm: () => (last.value = '已删除'),
      okText: '确认',
      title: '确定删除这一行吗？',
    },
    text: '删除',
  },
];
</script>
<template>
  <div>
    <VbenTableAction :actions="actions" align="start" />
    <p style="margin-top: 8px; font-size: 13px; opacity: 0.7">
      最近操作：{{ last }}
    </p>
  </div>
</template>

更多下拉

通过 dropdownActions 将次要操作收纳到「更多」下拉中，moreText 可自定义按钮文案。

<script lang="ts" setup>
import type { ActionItem } from '@vben/common-ui';

import { ref } from 'vue';

import { VbenTableAction } from '@vben/common-ui';

const last = ref('无');

const actions: ActionItem[] = [
  { key: 'edit', onClick: () => (last.value = '编辑'), text: '编辑' },
];

const dropdownActions: ActionItem[] = [
  { key: 'copy', onClick: () => (last.value = '复制'), text: '复制' },
  { key: 'export', onClick: () => (last.value = '导出'), text: '导出' },
  {
    danger: true,
    key: 'remove',
    // 下拉项同样支持气泡确认
    popConfirm: {
      cancelText: '取消',
      confirm: () => (last.value = '已移除'),
      okText: '确认',
      title: '确定移除吗？',
    },
    text: '移除',
  },
];
</script>
<template>
  <div>
    <VbenTableAction
      :actions="actions"
      :dropdown-actions="dropdownActions"
      align="start"
      divider
      more-text="更多"
    />
    <p style="margin-top: 8px; font-size: 13px; opacity: 0.7">
      最近点击：{{ last }}
    </p>
  </div>
</template>

权限控制

为操作项设置 auth 权限码，并注入 hasPermission 判断函数，无权限的操作会被隐藏。

<script lang="ts" setup>
import type { ActionItem } from '@vben/common-ui';

import { VbenTableAction } from '@vben/common-ui';

// 模拟当前用户拥有的权限码
const allow = new Set(['user:detail', 'user:edit']);

function hasPermission(auth?: string | string[]) {
  if (!auth) return true;
  const codes = Array.isArray(auth) ? auth : [auth];
  return codes.some((code) => allow.has(code));
}

const actions: ActionItem[] = [
  { auth: 'user:edit', key: 'edit', text: '编辑' },
  { auth: 'user:detail', key: 'detail', text: '详情' },
  // 无 user:delete 权限，按钮被隐藏
  { auth: 'user:delete', danger: true, key: 'delete', text: '删除（无权限）' },
];
</script>
<template>
  <VbenTableAction
    :actions="actions"
    :has-permission="hasPermission"
    align="start"
  />
</template>

在 vxe-table 中使用

不改变 vxe-table 原有渲染方式，推荐在列配置中声明插槽，在页面通过插槽渲染。

推荐：使用适配器封装的版本项目的 #/adapter/vxe-table 已对 VbenTableAction 做了二次封装，内部统一注入了 hasPermission（基于 useAccess().hasAccessByCodes）。因此从适配器引入时无需再传入 :has-permission，只需通过操作项的 auth 字段声明权限码即可。:::

// data.ts —— 列配置声明插槽
{
  align: 'center',
  field: 'operation',
  fixed: 'right',
  slots: { default: 'action' },
  title: $t('system.user.operation'),
  width: 180,
}

<!-- list.vue —— 从适配器引入，权限自动注入，无需传入 has-permission -->
<script setup lang="ts">
import { VbenTableAction } from '#/adapter/vxe-table';
</script>

<template>
  <Grid>
    <template #action="{ row }">
      <template #action="{ row }">
        <VbenTableAction
          :actions="[
            {
              text: $t('common.detail'),
              icon: 'lucide:eye',
              onClick: () => onDetail(row),
            },
            {
              text: $t('common.edit'),
              icon: 'lucide:edit',
              onClick: () => onEdit(row),
            },
          ]"
          :dropdown-actions="[
            {
              text: $t('common.delete'),
              icon: 'lucide:trash-2',
              danger: true,
              onClick: () => onDelete(row),
              auth: ['AC_100100'],
            },
          ]"
          align="center"
        />
      </template>
    </template>
  </Grid>
</template>

若直接从 @vben/common-ui 引入核心组件（不经过适配器），组件不依赖任何业务逻辑，需自行注入 hasPermission：

<script setup lang="ts">
import { useAccess } from '@vben/access';
import { VbenTableAction } from '@vben/common-ui';

const { hasAccessByCodes } = useAccess();
function hasPermission(auth?: string | string[]) {
  if (!auth) return true;
  return hasAccessByCodes(Array.isArray(auth) ? auth : [auth]);
}
</script>

<template>
  <VbenTableAction
    v-bind="useActions(row, onActionClick)"
    :has-permission="hasPermission"
    align="center"
  />
</template>

API

TableAction Props

属性名	描述	类型	默认值
actions	主操作按钮	ActionItem[]	[]
dropdownActions	「更多」下拉中的操作	ActionItem[]	[]
align	对齐方式	'start' | 'center' | 'end'	'end'
divider	按钮之间是否显示分割线	boolean	false
moreText	「更多」按钮文案（提供时显示在图标右侧）	string	-
hasPermission	权限判断函数，返回 false 则隐藏对应 auth 的操作（从 #/adapter/vxe-table 引入时已自动注入，无需手动传入）	(auth?: string | string[]) => boolean	-
class	根节点自定义类名	string	-

ActionItem

属性名	描述	类型	默认值
text	按钮文本	string	-
icon	图标组件	string| VbenIcon	-
onClick	点击回调	() => void	-
auth	权限码，配合 hasPermission 过滤	string | string[]	-
ifShow	是否显示	boolean | (() => boolean)	true
disabled	是否禁用	boolean	false
loading	加载状态	boolean	false
danger	危险操作（红色文字）	boolean	false
tooltip	提示	string | { content: string; side?: 'top' | 'bottom' | 'left' | 'right' }	-
popConfirm	气泡确认	TableActionPopConfirm	-
variant	按钮样式变体	ButtonVariants['variant']	'link'
size	按钮尺寸	ButtonVariants['size']	'sm'
key	唯一标识	string | number	-

TableActionPopConfirm

属性名	描述	类型	默认值
title	提示标题	string	'Are you sure?'
okText	确认按钮文案	string	'OK'
cancelText	取消按钮文案	string	'Cancel'
confirm	确认回调；未提供时回退到 action.onClick	() => void	-

贡献者

xingyu4j

页面历史

最后编辑于 5 天前

查看完整历史

04fbb7a-chore: 升级 shadcn-vue 组件到v4最新版 (#7972)