zhangkun
/
ditie2.0_web


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
							@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <div id="app" v-cloak>
        <div style="margin-bottom: 20px;">
            <el-button size="small"
                       v-on:click="addTab(editableTabsValue2)">
                add tab
            </el-button>
        </div>
        <el-tabs v-model="editableTabsValue2" type="card" closable v-on:tab-remove="removeTab">
            <el-tab-pane v-for="(item, index) in editableTabs2"
                         :key="item.name"
                         :label="item.title"
                         :name="item.name">
                <iframe id="mainframe" src="/Main/IndexCenter"></iframe>
            </el-tab-pane>
        </el-tabs>
        <!-- 先引入 Vue -->
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <!-- 引入组件库 -->
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
        <script>
            var app = new Vue({
                el: '#app',
                data() {
                    return {
                        editableTabsValue2: '2',
                        editableTabs2: [{
                            title: 'Tab 1',
                            name: '1',
                            content: 'Tab 1 content'
                        }, {
                            title: 'Tab 2',
                            name: '2',
                            content: 'Tab 2 content'
                        }],
                        tabIndex: 2
                    }
                },
                methods: {
                    addTab(targetName) {
                        let newTabName = ++this.tabIndex + '';
                        this.editableTabs2.push({
                            title: 'New Tab',
                            name: newTabName,
                            content: 'New Tab content'
                        });
                        this.editableTabsValue2 = newTabName;
                    },
                    removeTab(targetName) {
                        let tabs = this.editableTabs2;
                        let activeName = this.editableTabsValue2;
                        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.editableTabsValue2 = activeName;
                        this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);
                    }
                }
            });
        </script>
    </div>
    <style type="text/css">
        [v-cloak] {
            display:none;
        }
    </style>
</body>
</html>