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

业务需求，需要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"）。