vue+iviewui menu+tabs联动及tabs切换总结

//这一段代码是在上面Tabs里面的一段， v-on:select-tab 接收子component select-tab事件。

//下面是点击某个菜单后，触发select方法
select(event) {
console.log("---------select -------------")
// not display the welcome window
this.welcomedisplay = false




if (this.tabsHashTable[event] == undefined) {
// 如果此标签页没有打开过

let labelname = this.$refs["menuitem" + event][0].$el.innerText
// add tab
this.tabs.push({ display: true, component: event, label: labelname })
//add tab hash table (this used to locate the tab in tab array)
this.tabsHashTable[event] = this.tabs.length - 1
} else {

if(this.tabs[this.tabsHashTable[event]].display === false)
{
// 曾经打开过又隐藏[叉掉]的
this.tabs[this.tabsHashTable[event]].display = true
}

else{
//直接设置当前tab页为显示页即可,然后设置更新标志位(因为重新显示当前tab页,如果需要更新则自动更新即可.)

this.$refs[event][0].update = new Date().getTime()

}
//当display设置为true时, 如果之前为false,那么此component会重新创建. // 如何判断此component是否已经创建呢?

}
// 设置打开的tab为当前显示的tab
this.activeTab = event
console.log(this)
},
// 下面是关闭某个tab页的时候操作（根据iviewui的文档，直接将display设置为false即可）
handleTabRemove(name) {
// set this tab display to be false
this.tabs[this.tabsHashTable[name]].display = false;

// if displayed tabs size is 0, then show welcome message
if (this.tabs.filter(tab => tab.display == true).length == 0)
this.welcomedisplay = true;
},

//下面是A component （位于tabA）的触发切换TAB页跳转。因为我实现了，除了跳转tab页，还需要自动触发跳转到B后进行一个动作触发。 所以我们将数据放在this.$store.state中，供切换到B compoennt后自动从全局数据中获取。
billloanrelation(params) {
this.$store.state.billloanrelation.billkey = params.row.bill_proxy_serial_no
//this.$store.state.billloanrelation.billkey = this.partnerloanno; // test
this.$emit("select-tab", "billloanrelation")
}



//下面这段是B component。 需要实现2种方式一个是当B component（tabB）第一次打开加载时，会通过created （见vue组件的生命周期）来自动触发功能。 如果是B component（TabB）已经打开，仅是失去焦点。 那么这时候我们在上面select(event)的方法中， 将更新component B 的update值（这里就是简单设置为当前时间）， 此时component B的watch 发现update值变更后， 会自触发功能。

created: function(){
console.log('bill created')
this.queryFromExternal()
},
watch:{
update: function (value) {
console.log('bill changed ')
this.queryFromExternal()
}
},


//上面就是简单的一个 vue+iviewui menu+tabs联动及tabs切换总结 的实现方式。