面试题：vuejs项目中按钮级别权限怎么控制

利用hasPermission统一的权限判断方法进行按钮判断是否显示！

VUE组件代码：

<template>
  <a-button v-if="hasPermission(['20000', '20001', '20003'])">
    code拥有[20000,20001,20003]可见
  </a-button>
</template>

<script lang="ts">
  import { usePermission } from '/@/hooks/usePermission';

  export default defineComponent({
    setup() {
      const { hasPermission } = usePermission();
      return { hasPermission };
    },
  });
</script>

JS代码：

export function usePermission() {
  function hasPermission(value, def = true) {
    // 默认视为有权限
    if (!value) {
      return def;
    }

    const allCodeList = permissionStore.getPermCodeList;
    if (!isArray(value)) {
      return allCodeList.includes(value);
    }
    // intersection是lodash提供的一个方法，用于返回一个所有给定数组都存在的元素组成的数组
    return (intersection(value, allCodeList)).length > 0;

    return true;
  }
}

el-table合并行的通用方法（附js代码）

vue前端分页功能实现代码（附js代码）

el-table利用:row-style="rowClass"设置指定行变色

一款免费开源效果酷炫的 Vue / React 大屏数据展示组件库——DataV

vue项目动态设置background背景色，解决颜色被替换问题

标签： hasPermission, vue按钮权限

上面是“面试题：vuejs项目中按钮级别权限怎么控制”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_14143.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！