elementUI的iframe嵌套跳轉頁面

在elementUI中使用樹形控件和tabs標籤頁集成展示iframe嵌套跳轉頁面

1. 使用樹形控件

<el-tree style="margin-left: 20px; background-color: #F6F6F6" :data="treeData"
                                         node-key="id" :props="defaultProps" @node-click="handleNodeClick">
                                </el-tree>

2. 使用tabs標籤頁組件

<el-tabs v-model="editableTabsValue" type="border-card" closable @tab-remove="removeTab">
                        <el-tab-pane
                                v-for="(item, index) in editableTabs"
                                :key="item.name"
                                :label="item.title"
                                :name="item.name"
                        >
                            <iframe :src="item.content" style="width: 100%;height: 450px" frameborder="0"></iframe>
                        </el-tab-pane>
                    </el-tabs>

3. 添加數據和事件：

<script>
    new Vue({
        el: "#app",
        data: {
            treeData: [
                {
                    id: 1,
                    label: '合同管理',
                    icon: 'el-icon-location',
                    children: [{
                        id: 2,
                        label: '合同詳情',
                        icon: 'el-icon-location-outline'
                    }, {
                        id: 3,
                        label: '合同明細',
                        url: '/ContractDetails/index',
                        icon: 'el-icon-location-outline'
                    }]
                }
            ],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            editableTabsValue: '1',
            editableTabs: [{
                title: '首頁',
                name: '1',
                content: 'https://www.baidu.com'
            }],
            tabIndex: 1
        },
        methods: {
            //標籤頁處理
            handleNodeClick(data) {
                if (!data.children) {
                    //取得當前已打開的tab頁
                    let tabs = this.editableTabs;
                    let flag = true;//表示可以新打開
                    tabs.forEach((tab, index) => {
                        if (tab.title === data.label) {
                            //如果打開則選中
                            this.editableTabsValue = tab.name;
                            flag = false;
                            return;
                        }
                    });
                    if (flag) {//如果沒有打開則添加
                        let newTabName = ++this.tabIndex + '';
                        this.editableTabs.push({
                            title: data.label,
                            name: newTabName,
                            content: data.url
                        });
                        this.editableTabsValue = newTabName;
                    }
                }
            },
            //標籤頁移除
            removeTab(targetName) {
                let tabs = this.editableTabs;
                let activeName = this.editableTabsValue;
                if (activeName === targetName) {
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                            }
                        }
                    });
                }

                this.editableTabsValue = activeName;
                this.editableTabs = tabs.filter(tab => tab.name !== targetName);
            }
        }
    })

</script>