vxe组件 vxe-table 权限控制：通过 permission-code 实现按钮级显隐

vxe 组件内建了一套简洁的权限控制机制，它不依赖任何第三方库，能让我们灵活地控制组件（如按钮、链接等）的显隐和禁用状态。

这套机制的核心是 permissionMethod 全局配置，它定义了一个统一的权限校验方法。一旦配置好，只需在组件上添加一个 permission-code 属性，并传入对应的权限码，组件便会自动根据校验结果改变状态。

配置

javascript 复制代码

import { VxeUI } from 'vxe-pc-ui'

// 例如：后端获取用户路由权限数据
const userRouteMaps = {
  'user:add': true,     // 拥有新增用户的权限
  'user:edit': true,    // 拥有编辑用户的权限
  'data:export': false, // 没有导出数据的权限
}

VxeUI.setConfig({
  // 全局权限码控制方法
  permissionMethod ({ code }) {
    if (userRouteMaps[code]) {
      return {
        // 是否可视
        visible: false,
        // 是否禁用
        disabled: false
      }
    }
    return {
      visible: true,
      disabled: false
    }
  }
})

权限校验的核心逻辑就是通过返回的 visible 和 disabled 两个布尔值，来精确控制组件的最终状态

组件使用：通过 permission-code 控制

配置好全局方法后，就可以在支持该功能的组件上使用 permission-code 属性了。以下是一个基础示例，展示了如何控制按钮和链接组件。

html 复制代码

<template>
  <!-- 只有拥有 'user:add' 权限时，此按钮才可见 -->
  <vxe-button permission-code="user:add">新增用户</vxe-button>

  <!-- 只有拥有 'data:export' 权限时，此链接才可见 -->
  <vxe-link permission-code="data:export">导出数据</vxe-link>
</template>

多权限码：使用 | 实现"或"逻辑

html 复制代码

<template>
  <!-- 只要拥有 'user:add' 或 'user:edit' 任一权限，此按钮即可见 -->
  <vxe-button permission-code="user:add|user:edit">用户管理</vxe-button>
</template>

方法调用：在 JavaScript 中进行权限检查

除了在模板中声明式地使用，有时我们可能需要在 JavaScript 逻辑中主动进行权限判断。VxeUI.permission 对象提供了几个便捷方法，方便你进行命令式的权限检查。

API	说明
checkVisible(code)	判断给定的权限码是否"可见" （即拥有权限）
checkDisable(code)	判断给定的权限码是否"禁用"
getCheckInfo(code)	获取更详细的权限检查信息，返回 { visible, disabled } 对象

javascript 复制代码

// 场景：在某个操作执行前，检查用户是否有权限
if (VxeUI.permission.checkVisible('data:export')) {
  // 拥有权限，执行导出操作
  exportData()
} else {
  // 无权限，给出提示
  console.warn('您没有导出数据的权限！')
}

// 使用 "|" 分隔符进行"或"逻辑判断
if (VxeUI.permission.checkVisible('user:add|user:edit')) {
  // 拥有 user:add 或 user:edit 任一权限时，显示某个功能
  showManagePanel()
}

如果你的权限判断逻辑只涉及简单的"有或无"，那么这套内置机制足够简洁高效。

vxeui.com