一个页面有多个el-tabs时v-model
时间: 2023-07-01 15:05:26 浏览: 167
手动动态改变el-tabs标签页顺序
如果一个页面有多个 `el-tabs` 组件,你可以使用不同的 `v-model` 绑定不同的变量来实现对它们的控制。
例如,你可以定义两个变量 `activeTab1` 和 `activeTab2` 来分别绑定两个 `el-tabs` 组件的激活选项卡:
```html
<template>
<div>
<el-tabs v-model="activeTab1">
<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-tabs>
<el-tabs v-model="activeTab2">
<el-tab-pane label="Tab A">Content of Tab Pane A</el-tab-pane>
<el-tab-pane label="Tab B">Content of Tab Pane B</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default {
data() {
return {
activeTab1: 'Tab 1',
activeTab2: 'Tab A'
};
}
};
</script>
```
在上面的例子中,第一个 `el-tabs` 组件的激活选项卡将由 `activeTab1` 变量控制,而第二个 `el-tabs` 组件的激活选项卡将由 `activeTab2` 变量控制。你可以根据自己的需求定义更多的变量来控制其他的 `el-tabs` 组件。
阅读全文