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 addressList
                    fromData:[],
                    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 和通訊錄模式addressList
            changeMode() {
                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我也就只能實現基本的功能，做不出很酷炫的效果，慢慢來吧