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>