el-menu与el-tabs联动
时间: 2023-08-31 15:09:27 浏览: 120
手动动态改变el-tabs标签页顺序
要实现el-menu与el-tabs的联动,可以通过以下步骤实现:
1. 在el-tabs中设置v-model绑定当前选中的tab索引值。
2. 在el-menu中设置default-active属性绑定初始选中的菜单项索引值。
3. 在el-menu中设置@select事件监听菜单项的选中状态变化,通过this.$refs.tabs.setCurrentIndex(index)方法将当前选中的tab索引值更新为菜单项索引值。
示例代码:
```html
<template>
<div>
<el-menu default-active="0" @select="handleMenuSelect">
<el-menu-item index="0">Tab 1</el-menu-item>
<el-menu-item index="1">Tab 2</el-menu-item>
<el-menu-item index="2">Tab 3</el-menu-item>
</el-menu>
<el-tabs v-model="activeTabIndex" ref="tabs">
<el-tab-pane label="Tab 1">Content of Tab Pane 1</el-tab-pane>
<el-tab-pane label="Tab 2">Content of Tab Pane 2</el-tab-pane>
<el-tab-pane label="Tab 3">Content of Tab Pane 3</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default {
data() {
return {
activeTabIndex: 0
}
},
methods: {
handleMenuSelect(index) {
this.$refs.tabs.setCurrentIndex(index)
}
}
}
</script>
```
阅读全文