制作网页一般需要兼容哪些网站电子商务主要学什么

一、情景描述

像下面这种情况，你只能屏蔽了 <quantity/>组件 ，但是，不能影藏el-tab-pane页签。
而我们想要的是，影藏el-tab-pane页签及其内容。

  <el-tabs type="card"><el-tab-pane label="计量单位" v-hasPermi="['rent:basicinfo:preserve:quantity:list']" ><quantity/></el-tab-pane>
</el-tabs>

二、解决办法

1、Vue2写法

使用checkPermi + v-if实现

<template><el-tabs><el-tab-pane v-if="checkPermi(['system:user:add'])" label="用户管理" name="user">用户管理</el-tab-pane><el-tab-pane v-if="checkPermi(['system:user:add', 'system:user:edit'])" label="参数管理" name="menu">参数管理</el-tab-pane><el-tab-pane v-if="checkRole(['admin'])" label="角色管理" name="role">角色管理</el-tab-pane><el-tab-pane v-if="checkRole(['admin','common'])" label="定时任务" name="job">定时任务</el-tab-pane></el-tabs>
</template><script>
import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数export default{methods: {checkPermi,checkRole}
}
</script>

2、Vue3写法

Vue3中，因为有setup语法糖，所以，不需要在methods中注册函数。

import { checkPermi } from "@/utils/permission.js";function check(arr) {return checkPermi(arr);
}

<el-table-column label="操作" align="center" class-name="small-padding fixed-width"><template #default="scope"><!-- 修改按钮 --><el-button v-if="check(['unit:xxx:edit'])" link type="primary" icon="Edit"@click="handleUpdate(scope.row)">修改</el-button><!-- 查看按钮 --><el-button v-else link type="primary" icon="View" @click="handleUpdate(scope.row)">查看</el-button><!-- 删除按钮 --><el-button v-hasPermi="['unit:xxx:remove']" link type="primary" icon="Delete"@click="handleDelete(scope.row)">删除</el-button></template>
</el-table-column>