elementUi 动态添加tabs组件

直接上代码

模板部分：

    <div class="panel">
      <el-button type="primary" size="small" @click="addTab">
        添加新标签页
      </el-button>
      <el-tabs
        style="margin-top:15px;"
        v-model="editableTabsValue"
        type="card"
        @tab-remove="removeTab"
      >
        <el-tab-pane
          v-for="item in editableTabs"
          :key="item.name"
          :label="item.title"
          :name="item.name"
          :closable="item.close"
        >
          <component :is="item.content" :objId="item.name"></component>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 添加标签页弹层 -->
    <el-dialog
      title="添加新标签"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-input v-model="addTagsValue" placeholder="请填写标签名称"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose" size="small">取 消</el-button>
        <el-button
          type="primary"
          size="small"
          @click="makeSureAddTags(editableTabsValue)"
          >确 定</el-button
        >
      </span>
    </el-dialog>

　　

组件部分：（这里根据自己的需求去加载对应的组件），我的需求就是可以添加多个富文本组件

import MettingAgenda from "./mettingAgenda.vue"; // 会议议程组件，默认第一个
import Rich from "@/views/components/rich"; // 添加新标签富文本编辑器

　　

data部分：

      // 动态标签页配置
      editableTabsValue: "1",
      editableTabs: [
        {
          title: "会议议程",
          name: "1",
          content: MettingAgenda,
          close: false
        },
        {
          title: "会场介绍",
          name: "2",
          content: Rich,
          close: false
        }
      ],
      tabIndex: 2,
      dialogVisible: false, //添加新标签dialog状态
      addTagsValue: "" //添加新标签绑定值

　　

方法：

    addTab() {
      this.dialogVisible = true;
    },
    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);
    },
    makeSureAddTags(targetName) {
      console.log(targetName);
      if (this.addTagsValue === "") {
        this.$message({
          message: "标签名称不能为空",
          type: "error"
        });
        return;
      }
      if (this.addTagsValue.trim().length > 6) {
        this.$message({
          message: "标签名称最多6个字",
          type: "error"
        });
        return;
      }
      if (this.editableTabs.length > 5) {
        this.$message({
          message: "标签最多添加6个",
          type: "error"
        });
        return;
      }
      let newTabName = ++this.tabIndex + "";
      this.editableTabs.push({
        title: this.addTagsValue, //标签名
        name: newTabName,
        content: Rich, //对应组件名称
        close: true
      });
      this.editableTabsValue = newTabName;
      this.$message({
        message: "标签添加成功",
        type: "success"
      });
      this.handleClose(); // 初始化弹层
    },
    handleClose() {
      this.dialogVisible = false;
      this.addTagsValue = "";
    },

　　

这样就OK了