element tabs底部动态导航带删除添加功能

<el-tabs :tab-position="tabPosition" v-model="editableTabsValue" style="height: calc(100% - 48px)" editable @edit="handleTabsEdit">
    <el-tab-pane :key="item.name"
    v-for="(item, index) in editableTabs"
    :label="'Sheet'+(index+1)"
    :name="item.name"
    >
 </el-tab-pane>
    </el-tabs> </el-tab-pane>
    </el-tabs>

data：{
editableTabsValue: "1",
        editableTabs: [
          {
            title: "Sheet1",
            name: "1",
          },
         
        ],
        tabIndex: 1,
}
methods:{

 handleTabsEdit(targetName, action) {
          if (action === "add") {
            let newTabName = ++this.tabIndex + "";
            
            this.editableTabs.push({
              
              name: newTabName,
            });
            
            this.editableTabsValue = newTabName;
          }
          if (action === "remove") {
            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);
          }
        },
}