Element-UI:缓存Tabs打开的页签

竟然不缓存?

在使用Element ui 的时候,发现Tabs挺好用,于是做了这样一个页面:左侧是菜单,右侧顶部是Tabs,右侧下方是iframe.一切就绪,问题出现,就是每次点菜单的时候,Tabs就会新增一个页签,这导致iframe增加不少.于是想了个办法,来解决这个问题.

  1. 在menu菜单中,index直接为页面的名称;
  2. 在Select事件中,拿到index就可以请求页面了;
  3. 请求页面的时候,先判断页面是否已经存在于缓存中.如果存在则直接激活该页签,不存在就先添加到Tabs,然后激活,并放入缓存中.
  4. over……

但这样,存在另外一个问题:如果有几十个菜单,会堆叠几十个iframe.侧面一想,如果共用一个iframe,那么会出现另外一个问题,就是可能在上一个页面只输入了一部分文本,还没处理就切换页签,会丢失上个页面的数据.

于是,在菜单量不多的情况下,还是每个页签一个单独的iframe.便于处理.

html

源码

只有main.html是有实质内容的,其余html都是为了演示数据.

代码可以直接在本地运行,可以保存成文件,进行运行.

main.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <title>系统管理</title>
    <link href="https://cdn.bootcss.com/element-ui/1.4.0/theme-default/index.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/1.4.0/index.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .left-menu {
            width: 200px;
        }
    </style>
</head>

<body>
    <h1 class="title">系统管理</h1>
    <div id="app">
        <template>
<el-row>
  <el-col :span="4"><div class="grid-content bg-purple">
<el-menu default-active="userList" class="left-menu" @select="menuSelect" :collapse="isCollapse">
  <el-submenu index="1">
    <template slot="title">
      <span slot="title">用户</span>
    </template>
        <el-menu-item-group>
            <el-menu-item index="userList">用户列表</el-menu-item>
            <el-menu-item index="userAdd">用户添加</el-menu-item>
        </el-menu-item-group>
        </el-submenu>
        <el-submenu index="2">
            <template slot="title">
      <span slot="title">权限</span>
    </template>
            <el-menu-item-group>
                <el-menu-item index="roleList">权限列表</el-menu-item>
                <el-menu-item index="roleAdd">权限添加</el-menu-item>
            </el-menu-item-group>
        </el-submenu>
        </el-menu>
    </div>
    </el-col>
    <el-col :span="20">
        <div class="grid-content bg-purple-light">
            <el-tabs v-model="editableTabsValue" closable @tab-remove="removeTab" type="card">
                <el-tab-pane :key="item.name" v-for="(item, index) in editableTabs"  :label="item.title" :name="item.name">
                    <iframe class="iframepage" :src="item.content" width="100%" onload="changeFrameHeight()" style="border: none;" height="100%"></iframe>
                </el-tab-pane>
            </el-tabs>
        </div>
    </el-col>
    </el-row>

    </template>
    </div>
    <script>
        Vue.config.devtools = true;
        var Main = {
            data() {
                return {
                    isCollapse: false,
                    editableTabsValue: '1',
                    editableTabs: [{
                        title: '用户列表',
                        name: '1',
                        content: 'userList.html',
                        closable: false
                    }],
                    tabInfoObj: {}, // 缓存tabs打开的页签.
                    tabIndex: 1
                }
            },
            methods: { //给自定义的组件绑定事件
                selectMenu(key) {
                    var title = '';
                    switch (key) {
                        case 'userList':
                            title = '用户列表';
                            break;
                        case 'userAdd':
                            title = '用户添加';
                            break;
                        case 'roleList':
                            title = '权限列表';
                            break;
                        case 'roleAdd':
                            title = '权限添加';
                            break;
                    }
                    return title;
                },
                menuSelect(key, keyPath) {
                    if (this.tabInfoObj[key]) { // 判断,如果页签已经打开,则直接切换.
                        this.editableTabsValue = this.tabInfoObj[key] + '';
                    } else { // 如果页面未打开,则直接打开并添加到缓存对象中.
                        this.tabIndex += 1;
                        this.tabInfoObj[key] = this.tabIndex;
                        let newTabName = this.tabIndex + '';
                        this.editableTabs.push({
                            title: this.selectMenu(key),
                            name: newTabName,
                            content: key + '.html'
                        });
                        this.editableTabsValue = newTabName;
                    }
                },removeTab(targetName) {
                                // 关闭页签的时候,同时将其从缓存中删除(否则将导致后面不能再次添加).
                                for (var a in this.tabInfoObj) {
                		    if(this.tabInfoObj[a]==targetName){
                			delete this.tabInfoObj[a];
                			break;
                		   }
                	        };
			        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);
			      }  
            },
            created: function() {
            	// 把第一个页面添加到缓存中.
                this.tabInfoObj.userList = '1';
            }
        };
        var Ctor = Vue.extend(Main)
        new Ctor().$mount('#app')


        // 设置iframe高度自适应.
        function changeFrameHeight() {
            var ifm = document.getElementsByClassName("iframepage");
            for (var i = ifm.length - 1; i >= 0; i--) {
                ifm[i].height = document.documentElement.clientHeight;
            };
        }
        window.onresize = function() {
            changeFrameHeight();
        }
        // 设置iframe高度自适应 end.
    </script>
</body>

</html>

roleList.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <title>权限列表</title>
</head>
<body>
    权限列表
</body>
</html>

userAdd.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <title>用户添加</title>
</head>
<body>
    用户添加
</body>
</html>

userList.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <title>用户列表</title>
</head>
<body>
    用户列表
</body>
</html>

roleAdd.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <title>权限添加</title>
</head>
<body>
    权限添加
</body>
</html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据