el-tabs 可编辑
时间: 2023-07-26 15:06:13 浏览: 49
element-ui 的 el-tabs 组件默认是不可编辑的,但是可以通过设置 `editable` 属性来开启可编辑模式。
在可编辑模式下,可以使用 `tab-keydown` 和 `tab-remove` 事件来监听标签页的键盘事件和删除事件。
具体实现可以参考以下代码:
```vue
<template>
<div>
<el-tabs v-model="activeTab" editable @tab-remove="handleTabRemove" @tab-keydown="handleTabKeydown">
<el-tab-pane v-for="(tab, index) in tabs" :key="tab.name" :label="tab.name">
{{ tab.content }}
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default {
data() {
return {
activeTab: '',
tabs: [
{ name: 'Tab 1', content: 'Content of Tab 1' },
{ name: 'Tab 2', content: 'Content of Tab 2' },
{ name: 'Tab 3', content: 'Content of Tab 3' }
]
};
},
methods: {
handleTabRemove(targetName) {
const tabs = this.tabs;
const activeTab = this.activeTab;
if (activeTab === targetName) {
tabs.forEach((tab, index) => {
if (tab.name === targetName) {
const nextTab = tabs[index + 1] || tabs[index - 1];
if (nextTab) {
activeTab = nextTab.name;
}
}
});
}
this.tabs = tabs.filter(tab => tab.name !== targetName);
this.activeTab = activeTab;
},
handleTabKeydown(event) {
if (event.keyCode === 13) {
this.tabs.push({
name: 'New Tab',
content: 'Content of New Tab'
});
this.activeTab = 'New Tab';
}
}
}
};
</script>
```
在上面的代码中,我们设置了 `editable` 属性开启了可编辑模式,并且监听了 `tab-remove` 和 `tab-keydown` 事件来处理删除和添加标签页的逻辑。