ElementUI’s dynamic Tabs page is used for vue’s dynamic component operations

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

ElementUI’s dynamic Tabs page is used for vue’s dynamic component operations

Sometimes we need to use dynamic TAB pages, combined with different page content display. This is done using the dynamic Tabs page of elementUI

<div class="right" v-loading="loading">
    <div class="between main-top">
          <span @click="AddTab (editableTabsValue,'groupInfo (component name) ',' Tabs page name ')">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' ---- Check whether component tabs can be closed by closable: Use component elements to dynamically switch components based on the IS attribute in each component. : is = 'item. The content: This is the dynamically bound component :objId='objId' ---- This is the value passed between components, @fatherEvent="btnclick" ---- This is what the child does to the parent @deltab ='delTabs' ---- This is what the child does to the parent -->
     </el-tab-pane>
   </el-tabs>
</div>
Copy the code

//--------------------- The module that imports the component
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: [{// The first tabs opened by default
        title: 'Project Newsletter'.// The name of the tabs page
        name: '1'.content: chat,// The corresponding component name
        closable:falseFalse: no, true: yes}].tabIndex: 1.// Dynamic subcomponent
      objId:' '}; },Copy the code

addTab(targetName,name,title) {//---------------- This is the way to add a tabs page. The three values correspond to the tabs page passed by the click method above, but not all of them. The first value is mandatory
        let newTabName = ++this.tabIndex + ' ';
        if (name === 'statements') {//------------------ These are the judgments I make to distinguish the values required by the different components
          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: 'get it'+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) {//-------------- this closes the TAB page
        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){// The child clicks on the method that controls the parent. Different child components are called differently
      if (com === "groupInfo") {
        this.ChatMamList();
      } else if(com === 'renewGnode') {let value = this.editableTabsValue
        this.addTab(value,com,item)
      }else{
        this.manageNode(); }},delTabs(targetName){ //--------------- This is the parent component that wants to close the current TAB page
      let tabs = this.editableTabs;
      let activeName;
      tabs.forEach((tab, index) = > {
        if (tab.title === targetName) { // Because the judgment is different
          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();
    },
Copy the code

This is the code for the parent component

Here is the code for the child components

props: {
    objId: {//---------------- accepts the value of the parent component
      type:Object}},Copy the code

renew(){
      let objInfo = this.objId
      this.Gnodedialog = false
      // Call the parent component's method, fatherEvent-- the method on the parent's dynamic component, notice the code above
    //'renew',objInfo, both pass values
      this.$emit("fatherEvent".'renew',objInfo) 
}
Copy the code

Tabs tabs tabs tabs tabs tabs tabs tabs tabs tabs tabs

handleLoad (data) { 
let name = data.name 
if(name = 1){ 
this.timer1 = new Date().getTime() 
}else if(name = 2){ 
this.timer2 = new Date().getTime() 
}else if(name = 3){ 
this.timer3 = new Date().getTime() 
}else if(name = 4){ 
this.timer4 = new Date().getTime() 
} }
Copy the code

Please feel free to discuss in the comments section. The nuggets will draw 100 nuggets in the comments section after the diggnation project. See the event article for details