@TOCtab动态增减

vue tab标签页动态增减 content换成组件形式 前面两个标签页不能删减

这里使用的element-ui组件里的tab标签页，其他组件也是万变不离其宗

首先，根据官方文档里引入tab组件

// template里
<div style="margin-bottom: 20px;">
          <el-button
            size="small"
            @click="addTab(tabNameValue)"
          >
            add tab
          </el-button>
 </div>
<el-tabs v-model="tabNameValue" type="card" closable @tab-remove="removeTab">
          <el-tab-pane
            v-for="item in tabName"
            :key="item.name"
            :label="item.title"
            :name="item.name"
          >
            <!-- {{item.content}} -->
            <tab-component :is=item.content></tab-component>
            </el-tab-pane>
        </el-tabs>

< tab-component :is=item.content></ tab-component>这个是重点

// <script> 下面首先引入要用的组件
import design from './ProjectManagement/ProDesign'

// <script> components方法里注册组件
components: {
    design
  },

// methods 方法里添加方法
 addTab() {
        let tabName = ++this.tabIndex + '';
        this.tabName.push({
          title: 'New Tab',
          name: tabName,
          content: 'design'
        });
        this.tabNameValue = tabName;
      },
      removeTab(targetName) {
        let tabs = this.tabName;
        let activeName = this.tabNameValue;
        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.tabNameValue = activeName;
        this.tabName = tabs.filter(tab => tab.name !== targetName);
      }

这个是重点，把content里的内容换成刚刚注册的 组件名。
上面代码写的是都添加组件design，后面二次开发自己把addTab方法里添加tab用v-if或者tabName自己进行判断来添加组件。
实现效果如图：

标签底下的内容没截图保密， 不过标签里的内容就已经是刚刚引入的design组件了！

补充： 修改第一个第二个标签为不能删除：

添加样式：

// nav 是自定义的class，追踪引入的组件 才能该样式
.nav >>> .el-tabs__header .el-tabs__item:nth-child(1) span{
  display: none;
}
.nav >>> .el-tabs__header .el-tabs__item:nth-child(2) span{
  display: none;
}

再次补充：

把增加页面的按钮改需要增加的时候点击某处（去掉上述中的增加按钮）
下面展示一些 内联代码片。

此处我是把添加页面的方法写在fatherMethod里 通过子组件来调用

// 此处我是把添加页面的方法写在fatherMethod里 通过子组件来调用
 <tab-component
        :is="item.content"
         @fatherMethod="fatherMethodOther"
    ></tab-component>

fatherMethodOther方法就是上述中的 addTab()

//fatherMethodOther方法就是上述中的  addTab()
fatherMethodOther(str) {
      // this.tranFlowId=
      let tabName = ++this.tabIndex + ''
      let index = this.getIndex(this.tabName, str)
      if (index > -1) {
        this.$message({
          message: '已打开！',
          type: 'warning',
        })
      } else {
        if (str === '立项评审') {
          if (localStorage.getItem('huanjie') === '立项评审') {
            this.tabName.push({
              title: str,
              name: tabName,
              content: 'ProjectEvaluation',
            })
          } else if (localStorage.getItem('huanjie') === '立项评审(专家)') {
            this.tabName.push({
              title: str,
              name: tabName,
              content: 'ProjectEvaluation2',
            })
          }
        } 
        else if (str === '储备项目') {
          this.tabName.push({
            title: str,
            name: tabName,
            content: 'ReserveProject',
          })
        } 
        this.tabNameValue = tabName
      }
    },

// getIndex（）
//查找元素下标
    getIndex(data, str) {
      for (let i = 0; i < data.length; i++) {
        if (data[i].title === str) return i
      }
      return -1
    },

最后 再去子组件要点击哪的时候 来调用父组件这个添加页面方法，传入str

//  调用父组件fatherMethod方法
    _this.$emit("fatherMethod", str); 

如果对你有帮助一个(*￣︶￣)