Element Ui el-tabs挂组件使用

需求：
在列表页，展示表格，通过点击右上角的新增，在打开一个tabs页，是新增；
在列表页表格的操作列表点击详情，再打开一个tabs页，是详情；
在列表页表格的操作列表点击编辑，再打开一个tabs页，是编辑；
在新增页面，最下面有编辑按钮
每个打开的页面都有关闭按钮
以上的需求，element ui的标签页的功能可以满足
但是el-tabls 在v-for里面只支持字符串

index.vue 主页面

          

            
              名称:
              
                  
              
                
                    

                        查询
                    
                
            
          
        
        

            
                
                    
                
            
        

list.vue 表格页

 

        
            
                

                    新增
                
            
        
        

            
                
                    
                
                
                
                    
                
            
            

                
                
            
        

edit.vue 编辑页,新增页,详情页 通过父组件传过来的字段flag确定

           

                
                   
基础信息
                
                
                    编码:
                    
                        
{{form.code}}
                        
                    
                
                
                    编辑
                    关闭
                    保存
                
            

具体里面的逻辑不涉及，主要分析一下场景交互
一、index.vue页循环需要展示的tabs标签页

      editableTabsValue: '1',
      editableTabs: [{
        title: '电子围栏',
        name: '1',
        content: 'tableList'
      }],
      tabIndex: 1,

数组默认首先展示的是列表页，并且列表页永远在第一页，且没有关闭按钮
二、list.vue页在点新增按钮的时候，需要向父组件发送

    addSite () {
      this.$emit('toFu', {
        next: 'add',
        id: 'empty'
      })
    },

三、index.vue需要接收数据判断，并且向子组件edit.vue发送信息，告诉对方
当前是add/edit/details，这是第几个打开的窗口(因为每个页面自带关闭按钮，需要这个数字)，id(详情页和编辑页需要这个id去调接口)

    goAddTab (info) {
      if (info.next === 'add') {
        this.addTab(this.editableTabsValue, '新建', info.next, info.id)
      } else if (info.next === 'edit') {
        this.addTab(this.editableTabsValue, '编辑', info.next, info.id)
      } else if (info.next === 'details') {
        this.addTab(this.editableTabsValue, '查看', info.next, info.id)
      }
    },
    addTab (targetName, title, opera, data) {
      let newTabName = ++this.tabIndex + ''
      this.editableTabs.push({
        title,
        name: newTabName,
        content: 'edit',
        close: 'closable'
      })
      this.editableTabsValue = newTabName

      this.$nextTick(function () {
        this.$refs.child[this.$refs.child.length - 1].toEdit(opera, newTabName, data)
      })
    },

四、edit页需要接收数据 如果不是新增页就需要调接口 flag接收的是edit/add/details
time接收的是当前是第几页，id接收的是详情页调接口需要的参数

    toEdit (message, time, id) {
      this.flag = message
      this.time = time
      this.id = id
      if (this.id !== 'empty') {
        this.getList()
      }
    },

注：每次新增或者修改的保存调用接口成功的时候，需要向list.vue列表组件发送一个消息，告诉它消息更新了，需要刷新列表，，可以使用

bus.$emit('refresh', '1')   
bus.$on('refresh', (message) => {
      if (message === '1') {
        this.loadTableData(1, 10)
      }
 })

五、在edit.vue里面点击关闭按钮的时候，需要把当前的页面位置告诉index.vue

 this.$emit('toFuClose', {
        times: this.time
  })

// index.vue
   closeZi (info) {
      this.removeTab(info.times)
    },
   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)
    },

六、最后还有一个就是index.vue页点查询按钮的时候，需要发送给list.vue同时不管此时在哪个页面都跳回第一个页面列表页

    query () {
      // this.$refs.child[0].toList(this.teamName, this.teamLeaderName)
      this.$refs.child[0].toList(这里面写需要查询的字段) 
      this.editableTabsValue = '1'
    }
   // list.vue
    toList (这里接收传过来的查询条件) {
      this.loadTableData(1, 10)
    },