自定义权限按钮

1. 系统设置->菜单设置->其他权限,点开设置按钮名称与值,设置后勾上按钮


2. 前端:api->buttons.js添加配置;(早期版本文件夹是config->buttons.js)


3. 前端生成页面js文件或者vue文件实现此方法

代码实现

[vue3代码]写在生成的[表.vue]文件中,[vue2代码]写在[表.jsx]文件methods方法中;二选一实现

上面菜单设置的是哪张表,就在对应[表.vue]文件或者[表.jsx]文件实现

vue3代码
const onInit = ($vm) => {
  gridRef = $vm;
  gridRef.testBtnClick = () => {};
};

判断是否有按钮权限

[vue3代码]写在生成的[表.vue]文件中,[vue2代码]写在[表.jsx]文件methods方法中;二选一实现

判断是否有个某个页面的按钮权限

vue3代码
const onInit = ($vm) => {
  gridRef = $vm;
  //Search:改为要判断的按钮值
  //按钮可选值Search\Add\Update等,value参照值在api->buttons.js文件中的value值
  //1、判断指定页面是否有某个按钮权限
  if (proxy.base.hasAuthButton("表名", "Search")) {
  }
  //2、获取指定页面的所有按钮权限
  //获取页面的所有按钮权限
  const buttons = proxy.base.getAuthButtons("表名");

  
  //判断当前页面有哪些按钮权限
  //按钮可选值Search\Add\Update等,value参照值在api->buttons.js文件中的value值
  const b = gridRef.buttons.some(x=>{return x.value=='值'})
};

判断按钮权限(指令判断)

权限指令说明: v-auth="'表名:Add'" ,,

权限指令说明

  1. 使用方式:v-auth="'表名:Add'"
  2. 表名为设置菜单填写的表名
  3. Add为权限值,对应菜单设置【权限按钮】中的权限值
  4. 权限值选项:Search、Add、Update、Delete、CopyData、Import、Export、Upload、Audit、AntiAudit、CancelAudit、AbortAudit、UrgentAudit、Print、View及菜单上的自定义权限值

1.vue html标签中使用

<template>
  <div> 
      //1.判断是否有添加按钮权限
      <el-button v-auth="'表名:Add'">添加</el-button>
      //2.判断是否有修改按钮权限
      <el-button v-auth="'表名:Update'">修改</el-button>
      //3.判断多张表按钮权限、判断多个按钮
      <el-button v-auth="['表名:Add', '表名:Update']">编辑</el-button>
  </div>
</template>

1.render中使用

//1.判断是否有添加按钮权限
<el-button v-auth={'表名:Add'}  type="primary"  onClick={($e) => {}}>添加按钮</el-button>

//2.完整表格中自定义权限按钮(带样式)
columns.push({
  title:"操作",field:"操作",width:100,fixed:"right",align:"center",
  render: (h, { row, column, index }) => {
    return (
      <div>
          <el-button
          v-auth={'表名:Add'}
          link
          onClick={($e) => {}}
          color="#0425dd"
          plain
          size="small"
          style="padding: 5px !important;margin: 0;">
          <i style="font-size:13px" class="el-icon-edit-outline"></i>
          {proxy.$ts("按钮")}
        </el-button>
      </div>
    );
  }
});

//3.其他配置属性与上面【vue html标签中使用】一致
Last Updated 2026/8/23 11:05:01