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了