可以增删的element-ui框架动态tabs展示，升级版tabs

效果图如下：

在element-ui框架的动态增减标签页的基础上，加上一个弹框输入增加的内容，使使用更加灵活

代码如下：

 

<template>
  <div class="test5">
    <el-dialog
      title="添加tabs"
      :visible="dialogFormVisible"
      :before-close="handleClose"
    >
      <el-form :model="resetForm" ref="resetForm" :rules="rules">
        <el-form-item label="titlep" :label-width="formLabelWidth" prop="title">
          <el-input
            v-model="resetForm.title"
            autocomplete="off"
            ref="title"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="contentp"
          prop="content"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="resetForm.content"
            autocomplete="off"
            ref="content"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="quxiao">取 消</el-button>
        <el-button type="primary" @click="addTab('resetForm')">确 定</el-button>
      </div>
    </el-dialog>

    <div style="margin: 10px auto;">
      <el-button size="small" @click="dialogFormVisible = true">
        add tab
      </el-button>
    </div>
    <el-tabs
      v-model="editableTabsValue"
      type="card"
      closable
      @tab-remove="removeTab"
    >
      <el-tab-pane
        v-for="(item, index) in editableTabs"
        :key="index"
        :label="item.title"
        :name="item.name"
      >
        {{ item.content }}
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      resetForm: {
        title: "",
        name: "",
        content: "",
      },
      rules: {
        title: [
          { required: true, message: "请输入title", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        content: [
          { required: true, message: "请输入content", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        name: [
          { required: true, message: "请输入name", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
      },
      editableTabsValue: "2",
      editableTabs: [
        {
          title: "Tab 1",
          name: "1",
          content: "Tab 1 content",
        },
        {
          title: "Tab 2",
          name: "2",
          content: "Tab 2 content",
        },
      ],
      tabIndex: 2,
      formLabelWidth: "120px",
      dialogTableVisible: false,
      dialogFormVisible: false,
    };
  },
  methods: {
    quxiao() {
      this.dialogFormVisible = false;
      this.$refs["resetForm"].resetFields();
    },
    handleClose() {
      this.dialogTableVisible = false;
      this.dialogFormVisible = false;
      this.$refs["resetForm"].resetFields();
    },
    addTab(resetForm) {
      this.$refs[resetForm].validate((valid) => {
        if (valid) {
          // alert('submit!');
        } else {
          console.log("error submit!!");
          return false;
        }
        let newTabName = [];
        newTabName = ++this.tabIndex + "";
        this.editableTabs.push({
          title: this.$refs.title.value,
          name: newTabName,
          content: this.$refs.content.value,
        });
        this.editableTabsValue = newTabName;
      });
      this.dialogFormVisible = false;
      this.$refs["resetForm"].resetFields();
    },
    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);
    },
  },
};
</script>

<style scoped>
.test5 {
  width: 400px;
  border: 1px solid #ccc;
  height: 220px;
  margin: 0 auto;
}
</style>