VUE弹窗加载另一个VUE页面

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

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

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

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

首先肯定是找百度啊

主要参考的列子：vue编辑、新增弹框（引用外部页面）

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

菜单权限按钮：

<el-button type="info" @click="handleClick3(scope.row.id)"   size="mini">菜单权限</el-button>

引入MenuRole页面：

<el-dialog  :visible.sync="menuRoleVisible" append-to-body><menu-role v-if="menuRoleVisible" ref="menuRole"></menu-role>
</el-dialog>

编辑按钮触发方法：

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

MenuRole.vue完整代码：

<template><div class="widget-content"><tree-transfer :title="title":from_data='fromData':to_data='toData':defaultProps="{label:'label',value:'id'}"@addBtn='add'@removeBtn='remove'@change="changeMode":mode='mode' height='640px' filter openAll></tree-transfer><el-button type="primary" size="mini" @click="save" style="margin-left:30%;">保存</el-button></div>
</template>
<script>import treeTransfer from 'el-tree-transfer' // 引入export default {components: {treeTransfer},data(){return{roleId:"",title:["已有菜单权限","可选菜单权限"],mode: "transfer", // transfer addressListfromData:[],toData:[]}},methods:{//初始化数据dataInitialization(id){let that = this;that.roleId = id;that.axios.get("/qsmonitor/menu/getMenuByRole?roleId="+id).then(res => {that.fromData = res.data.data.fromData;that.toData = res.data.data.toData;console.info("this id ");console.info(res);that.$notify({title: "成功",message: res.data.message,type: "success"});}).catch(err => {that.$notify.error({title: "错误",message: err});console.log(err);});},// 切换模式 现有树形穿梭框模式transfer 和通讯录模式addressListchangeMode() {if (this.mode == "transfer") {this.mode = "addressList";} else {this.mode = "transfer";}},// 减少权限设置add(fromData,toData,obj){this.fromData = fromData;this.toData = toData;},// 增加权限设置remove(fromData,toData,obj){this.fromData = fromData;this.toData = toData;},save(){let addIds = "";this.fromData.forEach((item,i)=>{addIds += item.id+",";});this.axios.put("/qsmonitor/menu/setMenu?roleId="+this.roleId+"&addIds="+addIds).then(res => {if (res.data.data) {this.loading = false;}this.dataInitialization(this.roleId);this.$notify({title: "成功",message: res.data.message,type: "success"});}).catch(err => {console.info(err);this.$notify.error({title: "错误",message: "系统异常"});console.log(err);});}}}
</script>

最终实现效果：

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

VUE弹窗加载另一个VUE页面相关推荐

echarts vue图表加载动态数据 vue 数据加载完了,数据没有显示问题
记录一下遇到的问题: 使用echarts +vue 的时候.遇到后台请求的数据没有别获取拿到. 原因是图表先已经被加载了,vue里 data 默认初始化的数据是[]的,这个时候,后台请求方法还没有将 ...
vue项目加载慢，Nginx页面优化
优化的思路: F12调起调试模式,查看js和css加载所需时间(注意由于资源过大导致的加载过慢), 下图是经过压缩后的,压缩前chunk-vendors.js我的接近10M,加载几十毫秒. 如果部署在 ...
在一个html页面加载另一个html页面
jquery方法: 例如:实现在section选择器中添加third,html; $('section').load("third.html"); 如果带有回调函数: //$('s ...
vue : 无法加载文件 XXXXXXX\vue.ps1，因为在此系统上禁止运行脚本。
报错信息: 解决方法: 使用命令行: set-ExecutionPolicy RemoteSigned
总结Vue中index.html、main.js、App.vue、index.js之间关系以及Vue项目加载流程
总结Vue中index.html.main.js.App.vue.index.js之间关系以及Vue项目加载流程文章目录总结Vue中index.html.main.js.App.vue.index ...
7 种最棒的 Vue Loading 加载动画组件测评与推荐 - 穷尽市面上所有加载动画效果（Vue loader）类型
本文完整版:<7 种最棒的 Vue Loading 加载动画组件测评与推荐> 目录 7 种不同类型的 Vue Loading 加载动画组件 1. Vue Simple Spinner - ...
php加载外部html,VUE页面加载外部HTML实例详解
前后端分离,后端提供了接口.但有一部分数据,比较产品说明文件,是存在其他的服务器上的.所以,在页面显示的时候,如果以页面内嵌的形式显示这个说明文件.需要搞点事情以达到想要的效果.本文主要和大家介绍了V ...
[vue] 第一次加载页面时会触发哪几个钩子？
[vue] 第一次加载页面时会触发哪几个钩子? beforeCreate, created, beforeMount, mounted 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, ...
vue动态加载js和css以及部分页面加载特定的js和css
vue动态加载js和css以及部分页面加载特定的js和css vue项目第一次加载很慢的,发现在第一次加载要很大的js导致卡顿.可以使用cdn加速和其他gzip方式效果不是很明显.因此考虑每个页面动态 ...

VUE弹窗加载另一个VUE页面

VUE弹窗加载另一个VUE页面相关推荐

最新文章

热门文章