iView的Tabs标签页实现以及新增/关闭多次后页面空白问题解决

2022-11-21 834点热度 0人点赞 0条评论

业务需求,需要iView的Tabs标签页,可以动态生成(可以动态增加/可以关闭)

实现起来根据官方的文档,http://v4.iviewui.com/components/tabs#KGB,稍微改了一下,就做出来了,代码如下:

html代码,historyList就是一个数组,通过迭代来渲染出多个tabpane

<tabs v-model="tab" :animated="false" type="card" closable @on-tab-remove="handleTabRemove" @on-click="handleTabClick">
    <tab-pane :label="history.name" v-if="history.show" :name="history.no" v-for="history in historyList">
        <div>内容省略...</div>
    </tab-pane>
</tabs>

JS代码如下:

// Tab移除的时候,并没有将historyList里的内容移除,而是将show标记为false,以此来控制是否显示这个tabpane
handleTabRemove: function(name) {
    var found = this.historyList.find(history => history.no === name);
    if(found) {
        found.show = false;
    }
},

// 动态增加一个tabpane的实现,先根据no检查historyList是否有记录了,如果有,把show改成true,没有再增加
addClicked: function() {
    // 这里根据自己的业务逻辑组装出需要的内容
    var no = "xxx";
    var name = "some name";
    var found = this.historyList.find(history => history.no === row.no);
    if(found) {
        found.show = true;
    }else{
        this.historyList.push({no: no, name: name, show: true})
    }

    this.tab = no;
},

以上做好后,能正常显示并实现功能,但是经过测试后发现一个问题:

就是多次点击删除、新增后(尤其是tabpane的标题label内容有重复的情况下)页面很容易出现空白

经过排查后发现,是没有给tab-pane增加key,iview在做缓存的时候,可能根据key来的,所以在某些内容相同的情况下产生了混乱,修改后的Html代码如下:

<tabs v-model="tab" :animated="false" type="card" closable @on-tab-remove="handleTabRemove" @on-click="handleTabClick">
    <tab-pane :label="history.name" :key="history.no" v-if="history.show" :name="history.no" v-for="history in historyList">
        <div>内容省略...</div>
    </tab-pane>
</tabs>

这里给key增加一个唯一值(或者换成迭代v-for="(history,idx) in historyList"),然后:key=idx 也是可以的,只要给一个值不重复就好。问题得到解决。

另外还有一个需要注意的:

我之前也是通过监听@on-tab-remove直接删除historyList里面的内容来控制是否显示,发现这样不行,如果删除了多个tab-pane里面的第一个,后面的也会一并删除,官方文档也是通过控制一个变量的状态来判断是否显示(我代码中就是v-if="history.show")。

admin

这个人很懒,什么都没留下

文章评论

您需要 登录 之后才可以评论