el-tabs双击可编辑标签名称同时阻止el-tabs的默认键盘事件

在el-tab-pane的label插槽中写好结构

<el-tab-pane
  v-for="(item,index) in editTableList"
   :key="item.id"
   :name="index"
   :closable="true"
   :addable="true"
>
   <template #label>
      <span v-if="item.changeName" @dblclick="editTabItemName(item)">{{ item.name }}</span>
      <el-input v-else v-model="item.name" @blur="changeTabItemName(item.name,index)"  />
   </template>
   .......
</el-tan-pane>

// 双击编辑label
const editTabItemName = (item) => {
  item.changeName = false // 展示输入框
  tabLabel.value = item.name //保存修改前的label值
}
// 修改tab-pane的名字
const changeTabItemName = (val,index) => {
  if(!val)
    editTableList.value[index].name = tabLabel.value //当输入框值为空时，默认不修改
  editTableList.value[index].changeName = true
}

写完之后遇到一个问题：在输入框中按删除键删除原来的值时，当前的tab-pane也被删除了，
解决办法：在el-tabs中添加@key.capture.stop( 我用的是element-plus，如果使用的是element-ui，则添加@key.native.capture.stop )

 <el-tabs
    v-model="editableTabsValue"
    type="card"
    @keydown.capture.stop
    :before-leave="handleBeforeLeave"
    @tab-remove="handleTabsRemove"
  >
  ......
  </el-tabs>