VUE弹窗加载另一个VUE页面

之前实现了一个功能VUE利用tree-transfer插件实现角色菜单动态设置

在这个功能的基础上,进一步完善

角色列表Uacter.vue页面,点击【菜单设置】按钮,弹出角色菜单MenuRole.vue页面,也就是说实现的是一个弹窗功能,只不过加载的vue页面

说来惭愧,这是我应用vue的第4天,好多东西都不知道,然后就是现学现用

首先肯定是找百度啊

主要参考的列子:vue编辑、新增弹框(引用外部页面)

但是按照上边这个方法,我的弹窗一直都没有显示出来,一个大的改动点是我Uacter.vue页面引用MenuRole时直接包裹在dialog里边

菜单权限按钮:

菜单权限

引入MenuRole页面:


    

VUE弹窗加载另一个VUE页面_第1张图片

编辑按钮触发方法:

   //设置菜单权限
    handleClick3(id){
        let roleId = id;
        this.menuRoleVisible = true;
        this.$nextTick(()=>{
            this.$refs.menuRole.dataInitialization(roleId);
       })
    }

MenuRole.vue完整代码:


最终实现效果:

VUE弹窗加载另一个VUE页面_第2张图片

后记:用这个tree-transfer插件真的完美解决了我的问题,而且不需要再去给左移、右移按钮添加事件。看别人实现的代码好像很顺利,但真的做起来的时候总会遇到各种bug,我就一点一点去改去测,方法有些笨,毕竟刚开始接触vue呢,但是感觉以我现在混迹后端的水平,vue我也就只能实现基本的功能,做不出很酷炫的效果,慢慢来吧

你可能感兴趣的:(VUE,vue)