动态控制tab页 显示隐藏的问题

Question

通过接口 控制当前用户是否能看到项目成本评估这个页签。

我目前的实现方法是自定义了一个指定，发现如果没有这个tab标签的权限 如果没有对应的权限 则删除当前节点

import util from './util'

const hasPermission = {
    install (Vue, options) {
        Vue.directive('hasPermission', {
            bind (el, binding, vnode) {

                //当前用户所有权限数据
                let permissionList = JSON.parse(localStorage.getItem('permissionList'));
                //当前页面路由名称
                let routeName = vnode.context.$route.name;
                //根据当前页路由名称 权限数据中筛选出当前页面权限数据结构

                let parentData = permissionList.filter(o => o.resUrl === routeName);


                let childPermissionList = permissionList.filter(o => o.resParentId === parentData[0].resId);


                if (util.hasPermission(childPermissionList,binding.value).length === 0) {
                    //如果没有对应的权限  则删除当前节点
                    el.parentNode.removeChild(el);
                }
            }
        });
    }
};

export default hasPermission;

重点来了，我发现控制之后的效果是这样的

这个 el.parentNode.removeChild(el) 只是把tab里面的内容删掉了，但是tab的头并没有被隐藏。

大家能给个实现这个需求的思路或者改进的方法么？ 非常感谢

Answer 1

你在生成tab的时候判断下