这是我参与11月更文挑战的第21天，活动详情查看：2021最后一次更文挑战
elementUI的动态tabs页的使用，vue的动态组件的操作
有时候我们需要用到动态的tab页，结合不同的页面内容来显示。这里是使用了elementUI的动态tabs页来实现的
下面是代码的实现案例
- :closable='item.closable' ----通过closable来判断当前tabs是否可以关闭
- component：通过使用component元素，在根据组件中的is属性来动态的切换不同的组件。
- :is='item.content'：这是动态绑定的组件
- :objId='objId' ----这个是组件之间的传值，父组件传值给子组件的
- @fatherEvent="btnclick" ----这是子组件对父组件的操作
- @delTab='delTabs' ----这是子组件对父组件的操作
<div class="right" v-loading="loading">
<div class="between main-top">
<span @click="addTab(editableTabsValue,'groupInfo（组件的名称）','tabs页的名称')">add tabs</span>
</div>
<el-tabs v-model="editableTabsValue" type="card" @tab-remove="removeTab">
<el-tab-pane v-for="(item, index) in editableTabs" :key="index" :label="item.title" :name="item.name" :closable='item.closable'>
<component :is='item.content' :objId='objId' @fatherEvent="btnclick" @delTab='delTabs'></component>
</el-tab-pane>
</el-tabs>
</div>
在需要的页面里面引入组件的模块
//---------------------引入组件的模块
import chat from './chat'
import create from './create'
import statements from './statements'
import groupInfo from './groupInfo'
import renew from './renew'
import project from './project'
export default {
props: {},
components: {
chat,
statementsGnode,
createGnode,
groupInfo,
renewGnode,
project
},
data() {
return {
editableTabsValue: '1',
editableTabs: [{//第一个默认打开的tabs
title: '项目通讯',//tabs页的名称
name: '1',
content: chat,//对应组件名称
closable:false// 是否可以关闭，false是不可以，true是可以关闭
}],
tabIndex: 1,
//动态子组件
objId:'',
};
},
这是添加tabs页的方法，三个值对应着上面点击方法传过来的，但是也不是三个都要，第一个值是必须要传的
addTab(targetName,name,title) {//----------------这是添加tabs页的方法，三个值对应着上面点击方法传过来的，但是也不是三个都要，第一个值是必须要传的
let newTabName = ++this.tabIndex + '';
if (name === 'statements') {//------------------这几个判断是我要区分开不同的组件所需要的值来做的
this.objId = title
this.editableTabs.push({
title: title.name,
name: newTabName,
content: name,
closable:true
});
} else if (name === 'renew'){
this.objId = title
this.editableTabs.push({
title: '够着'+title.name,
name: newTabName,
content: name,
closable:true
});
}else{
this.editableTabs.push({
title: title,
name: newTabName,
content: name,
closable:true
});
}
this.editableTabsValue = newTabName;
},
这是关闭tab页的
removeTab(targetName) {//--------------
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);
},
控制子组件的（这个子组件点击控制父组件的方法，不同的子组件对应不同的调用）
btnclick(com,item){//这个子组件点击控制父组件的方法，不同的子组件对应不同的调用
if (com === "groupInfo") {
this.ChatMamList();
} else if(com === 'renewGnode'){
let value = this.editableTabsValue
this.addTab(value,com,item)
}else{
this.manageNode();
}
},
delTabs(targetName){ //---------------这是子组件想要关闭当前tab页的，控制父组件的操作
let tabs = this.editableTabs;
let activeName;
tabs.forEach((tab, index) => {
if (tab.title === targetName) { //因为判断不一样
let nextTab = tabs[index + 1] || tabs[index - 1];
if (nextTab) {
activeName = nextTab.name;
}
}
});
this.editableTabsValue = activeName;
this.editableTabs = tabs.filter(tab => tab.title !== targetName);
this.manageNode();
},
以上是父组件的的代码
下面是子组件的代码
props: {
objId:{//----------------接受父组件的值
type:Object
}
},
renew(){
let objInfo = this.objId
this.Gnodedialog = false
//调用父组件的方法，fatherEvent--是在父组件的的动态组件component上面的方法，注意看上面的代码
//'renew',objInfo，都是传值
this.$emit("fatherEvent",'renew',objInfo)
}
这样就可以完成了对动态的tabs的页面使用实例啦
