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

在Vue中使用Element UI的el-tabs组件时，可以通过监听标签的双击事件来实现可编辑的标签名称。以下是一个简单的实现示例：

<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane
      v-for="item in editableTabs"
      :key="item.name"
      :label="item.title"
      :name="item.name"
    >
      <span slot="label" @dblclick="handleDoubleClick(item)">
        {{ item.title }}
        <i v-if="item.edit" class="el-icon-edit"></i>
      </span>
    </el-tab-pane>
  </el-tabs>
</template>
 
<script>
export default {
  data() {
    return {
      activeName: '1',
      editableTabs: [
        { title: 'Tab 1', name: '1', edit: false },
        { title: 'Tab 2', name: '2', edit: false },
        // more tabs...
      ],
      currentTab: null,
    };
  },
  methods: {
    handleDoubleClick(item) {
      this.currentTab = item;
      item.edit = true;
      this.$nextTick(() => {
        const input = this.$el.querySelector('.el-tabs__nav .is-active .edit-input');
        input.focus();
      });
    },
    handleClick(tab, event) {
      if (this.currentTab && !this.currentTab.edit) {
        this.currentTab = null;
      }
    }
  }
};
</script>
 
<style scoped>
.edit-input {
  width: 80px;
  margin-left: 5px;
}
</style>

在这个示例中，我们定义了一个editableTabs数组来存储标签的信息。每个标签对象中的edit属性用来标识该标签是否处于编辑状态。在handleDoubleClick方法中，我们将双击的标签对象的edit属性设置为true，并在Vue的下一个更新循环中，通过this.$el.querySelector获取到编辑输入框并将焦点设置到输入框。在handleClick方法中，我们处理了标签的点击事件，如果当前标签不是处于编辑状态，我们将currentTab设置为null。