el-tabs双击可编辑标签名称

Question

el-tabs双击可编辑标签名称

对于动态添加的tabs标签实现可双击编辑功能

return {
      editableTabsValue: "2",
      tabIndex: 2,
      editableTabs: [
        {
          title: "大纲1",
          name: "2",
          inputFlag: false,
        },
      ],
      },
    };

第一个是固定存在的

从第二个开始是动态生成的

现在需要对这个标签名重名名

这是增加和删除标签的事件

addTab(targetName) {
      let newTabName = ++this.tabIndex + "";
      this.editableTabs.push({
        title: "大纲" + (this.tabIndex - 1),
        name: newTabName,
        inputFlag: false,
      });
      this.editableTabsValue = newTabName;
    },
    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);
    },

Answer 1

https://blog.csdn.net/VVVVV16/article/details/130262763