跳转到指定el-tab-pane
时间: 2023-09-11 11:06:10 浏览: 115
解决vue中el-tab-pane切换的问题
5星 · 资源好评率100%
要跳转到指定的 `el-tab-pane`,你可以使用 `activeName` 属性来设置当前激活的选项卡。通过将 `activeName` 属性绑定到你想要激活的选项卡的名称,就可以实现跳转。
以下是一个示例:
```html
<template>
<div>
<el-tabs v-model="activeTabName">
<el-tab-pane name="tab1">Tab 1</el-tab-pane>
<el-tab-pane name="tab2">Tab 2</el-tab-pane>
<el-tab-pane name="tab3">Tab 3</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default {
data() {
return {
activeTabName: 'tab1' // 默认激活的选项卡
};
}
};
</script>
```
在上面的示例中,`el-tabs` 组件的 `v-model` 属性绑定到了 `activeTabName` 变量。通过更改 `activeTabName` 的值,你可以实现跳转到指定的选项卡。
例如,如果你想要跳转到 "Tab 2",你可以在适当的时机(例如点击一个按钮)更新 `activeTabName` 的值:
```javascript
this.activeTabName = 'tab2';
```
这样就会激活 "Tab 2" 的选项卡。你可以根据你的需求更新 `activeTabName` 的值来跳转到不同的选项卡。
阅读全文