跳到主要内容

禁用控制 ✔

表单禁用控制可通过如下方式实现

一、用法：​

import { usePermission } from '/@/hooks/web/usePermission';
const { isDisabledAuth} = usePermission();

isDisabledAuth函数接收后台权限编码,可传递数组isDisabledAuth(['user:add'])

BaseForm中控制​

  • 通过 dynamicDisabled 动态判断当前组件是否禁用 如下代码所示
{
  field: 'field3',
  component: 'DatePicker',
  label: '字段3',
  dynamicDisabled: ({ values }) => {
     return isDisabledAuth('user:add');
  },
},

单独组件中控制​

<a-checkbox :disabled="isDisabledAuth('user:add')"></a-checkbox>

二、权限配置：​

1.配置按钮/权限​

2.角色授权​

三、使用说明​

  1. :disabled="isDisabledAuth('user:add')" 调用方法disabledAuth，方法参数user:add为授权标识，该方法根据授权规则返回true/false，控制是否禁用
  2. 权限编码在【系统管理--菜单管理】中配置，添加按钮类型的菜单数据，授权标识配置值user:add，策略选择可编辑，状态选择有效

控制规则：​

  • 菜单权限中若没有对应指令编码的配置，则不进行禁用控制，
  • 策略：可编辑，未授权时控件禁用，授权后可编辑

四、页面效果​

未配置角色权限

配置角色权限