elementUI的動態tabs頁的使用，vue的動態組件的操作

elementUI的動態tabs頁的使用，vue的動態組件的操作

有時候我們需要用到動態的tab頁，結合不同的頁面內容來顯示。這里是使用了elementUI的動態tabs頁來實現的

<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>
         <!-- 
		:closable='item.closable' ----通過closable來判斷當前tabs是否可以關閉
		component：通過使用component元素，在根據組件中的is屬性來動態的切換不同的組件。
		:is='item.content'：這是動態綁定的組件
		:objId='objId'  ----這個是組件之間的傳值，父組件傳值給子組件的
		@fatherEvent="btnclick" ----這是子組件對父組件的操作
		@delTab='delTabs' ----這是子組件對父組件的操作
		-->
     </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:'',
    };
  },

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;
      },
      removeTab(targetName) {//--------------這是關閉tab頁的
        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) 
}