跳到主要内容

显隐控制 ✔

实现表单的显示隐藏

BasicForm表单​

一、用法：​

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

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

BaseForm中使用方式​

show方式控制​

  • 通过 show 属性动态判断当前组件是否显示，css 控制，不会删除 dom

{
  field: 'field1',
  component: 'Input',
  label: '字段1',
  show: ({ values }) => {
    return hasPermission('user:add');
  }
}

ifShow方式控制​

  • 通过 ifShow 属性动态判断当前组件是否显示，js 控制，会删除 dom
{
  field: 'field2',
  component: 'Input',
  label: '字段2',
  ifShow: ({ values }) => {
     return hasPermission('user:add');
  }
}

v-auth（通过权限控制显隐)​

demo:order:auth 标识来源于系统菜单创建的按钮。然后通过角色授权控制该表单项在哪些角色下可见。v3.6.4+

{
    field: 'orderAuth',
    component: 'Input',
    label: '指令权限',
    helpMessage: ['有权限右侧的"选中值"可见，否则不可见'],
    colProps: {
      span: 12,
    },
  },
  {
    field: 'orderAuth',
    auth: 'demo:order:auth',
    component: 'JEllipsis',
    label: '选中值',
    colProps: { span: 12 },
  },

插槽中使用方式​

<template #jSelectUser="{model, field }">
    <JSelectUser v-model:value="model[field]" v-if="hasPermission('user:add')"/>
</template>

二、权限配置：​

1.配置按钮/权限​

2.角色授权​

三、使用说明​

  1. hasPermission('user:add') 指令值“name”为授权标识，可对该授权标识进行“显示/访问”控制
  2. 权限编码在【系统管理--菜单管理】中配置，添加按钮类型的菜单数据，授权标识配置值user:add，策略选择显示/访问，状态选择有效
控制规则：​
  • 使用hasPermission后，菜单权限中若没有对应指令编码的配置，则不显示控件
  • 策略：显示/访问，未授权时不显示，授权后显示
  • 灵活： 一个授权标识码，可以控制多个控件，也可用于列表列字段的控制（请灵活使用）

四、页面效果​

未配置角色权限

配置角色权限

原生表单​

使用v-auth指令和isDisabledAuth()函数

示例：​

1、控制字段的显示与隐藏

2、控制字段的禁用

3、特殊情况处理 如果给必填字段设置隐藏权限，将会导致字段隐藏了，但是校验还存在的问题，造成该问题的原因是表单的渲染顺序导致的。

方案：想要解决该问题，就不能仅仅使用 v-auth 的形式来控制表单了，还需要通过编码的方式，动态给该表单的必填校验设置为false，将rules设置成computed计算属性可以获得更好的性能。