Vben Admin—— vben-admin BasicTable表格 按钮权限控制的两种方式

方式一

<a-button
  type="primary"
  v-auth="'demo.list.export'"
  :loading="exportLoading"
>导出</a-button>

方式二

<TableAction
  :actions="[
    {
      label: '详情',
      onClick: detail.bind(null, record),
      auth: 'demo.list.info',
    },
  ]"
  :dropDownActions="[
    {
      label: '编辑',
      onClick: edit.bind(null, record),
      auth: 'demo.list.edit',
      ifShow: false,
    },
  ]"
/>

代码片段

<template>
  <div>
    <BasicTable @register="registerTable">
      <template #tableTitle>
        <a-button
          type="primary"
          v-auth="'demo.list.export'"
          :loading="exportLoading"
          >导出</a-button
        >
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: '详情',
              onClick: detail.bind(null, record),
              auth: 'demo.list.info',
            },
          ]"
          :dropDownActions="[
            {
              label: '编辑',
              onClick: edit.bind(null, record),
              auth: 'demo.list.edit',
              ifShow: false,
            },
          ]"
        />
      </template>
    </BasicTable>
  </div>
</template>