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);
    },

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

在 el-tabs 节点上监听双击操作
然后显示 input 输入框，进行修改
监听回车事件保存当前修改内容

要实现可双击编辑标签名称的功能，您可以在标签标题上添加一个输入框，当用户双击标签标题时，切换到输入框模式，允许用户编辑标签名称。您可以按照以下步骤来实现：

在标签标题上添加一个双击事件，当用户双击标签标题时，触发该事件。

在双击事件处理程序中，将标签标题替换为一个输入框，并将输入框的值设置为当前标签的名称。您可以使用 v-if 来切换标签标题和输入框的显示状态。

当用户编辑完标签名称后，可以使用 v-on:blur 事件将输入框的值保存到标签对象中，并重新显示标签标题。

下面是一个示例代码，可以帮助您实现这个功能：

<template>
  <div>
    <el-tabs v-model="editableTabsValue" type="border-card" closable @tab-remove="removeTab">
      <el-tab-pane v-for="(tab, index) in editableTabs" :key="tab.name" :label="tab.title" :name="tab.name">
        <template #label>
          <span v-if="!要实现可双击编辑标签名称的功能，您可以在标签标题上添加一个输入框，当用户双击标签标题时，切换到输入框模式，允许用户编辑标签名称。您可以按照以下步骤来实现：

1. 在标签标题上添加一个双击事件，当用户双击标签标题时，触发该事件。

2. 在双击事件处理程序中，将标签标题替换为一个输入框，并将输入框的值设置为当前标签的名称。您可以使用 v-if 来切换标签标题和输入框的显示状态。

3. 当用户编辑完标签名称后，可以使用 v-on:blur 事件将输入框的值保存到标签对象中，并重新显示标签标题。

下面是一个示例代码，可以帮助您实现这个功能：

```html
<template>
  <div>
    <el-tabs v-model="editableTabsValue" type="border-card" closable @tab-remove="removeTab">
      <el-tab-pane v-for="(tab, index) in editableTabs" :key="tab.name" :label="tab.title" :name="tab.name">
        <template #label>
          <span v-if="!tab.inputFlag" @dblclick="editTabTitle(tab)">{{ tab.title }}</span>
          <el-input v-else v-model="tab.title" size="mini" @blur="saveTabTitle(tab)" />
        </template>
        <p>这里是标签 {{ tab.name }} 的内容</p>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      editableTabsValue: '2',
      tabIndex: 2,
      editableTabs: [
        {
          title: '大纲1',
          name: '2',
          inputFlag: false,
        },
      ],
    };
  },
  methods: {
    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, you can add an input box to the tab title and allow users to edit the tab name when they double-click on the tab title. You can follow these steps to implement it:

1. Add a double-click event on the tab title. When the user double-clicks on the tab title, trigger this event.

2. In the event handler, replace the tab title with an input box, and set the value of the input box to the current tab name. You can use `v-if` to switch the display state of the tab title and input box.

3. When the user finishes editing the tab name, you can use the `v-on:blur` event to save the value of the input box to the tab object and display the tab title again.

Here is an example code that can help you implement this feature:

```html
<template>
  <div>
    <el-tabs v-model="editableTabsValue" type="border-card" closable @tab-remove="removeTab">
      <el-tab-pane v-for="(tab, index) in editableTabs" :key="tab.name" :label="tab.title" :name="tab.name">
        <template #label>
          <span v-if="!tab.inputFlag" @dblclick="editTabTitle(tab)">{{ tab.title }}</span>
          <el-input v-else v-model="tab.title" size="mini" @blur="saveTabTitle(tab)" />
        </template>
       如果您需要继续添加代码，请参考以下代码：

```javascript
      editTabTitle(tab) {
        tab.inputFlag = true;
        this.$nextTick(() => {
          // 等待DOM更新后，自动聚焦到输入框
          this.$refs[`input-${tab.name}`][0].focus();
        });
      },
      saveTabTitle(tab) {
        tab.inputFlag = false;
      },
    },
  },
};
</script>

在这个示例中，我们在标签标题的模板中使用了 v-if 和 v-else 来切换标签标题和输入框的显示状态。当 tab.inputFlag 为 false 时，显示标签标题；当 tab.inputFlag 为 true 时，显示输入框。

在双击事件处理程序 editTabTitle 中，我们将 tab.inputFlag 设置为 true，并使用 $nextTick 方法等待DOM更新后，自动聚焦到输入框。在输入框的 blur 事件处理程序 saveTabTitle 中，我们将 tab.inputFlag 设置为 false，并使用双向绑定将输入框的值保存到标签对象中。