el-tab-pane设置默认选项
时间: 2023-08-13 10:00:27 浏览: 621
要设置 el-tab-pane 的默认选项,你可以使用 `v-model` 和 `default-active` 属性来实现。
首先,在 el-tabs 组件上,使用 `v-model` 指令将一个变量与当前激活的选项进行双向绑定:
```html
<el-tabs v-model="activeTab">
<el-tab-pane label="Tab 1">Content 1</el-tab-pane>
<el-tab-pane label="Tab 2">Content 2</el-tab-pane>
<!-- 其他 tab-pane... -->
</el-tabs>
```
接下来,在 Vue 实例中,定义 `activeTab` 数据属性并设置默认选项:
```javascript
data() {
return {
activeTab: 'Tab 1' // 默认选中的选项
};
}
```
在上述代码中,我们将 `activeTab` 设置为 'Tab 1',这样在页面加载时,默认选中的选项就会是 'Tab 1'。
另外,如果你想通过编程方式更改默认选项,可以使用 `default-active` 属性。将 `default-active` 设置为初始选中的选项的 label 值:
```html
<el-tabs v-model="activeTab" default-active="Tab 2">
<!-- tab-pane... -->
</el-tabs>
```
通过以上代码,你可以设置 el-tab-pane 的默认选项。希望对你有所帮助!如果你还有其他问题,请随时提问。
阅读全文