el-tabs 默认第一个
时间: 2024-07-01 14:01:19 浏览: 292
El-Tab 是 Element UI 中的一个组件,用于创建选项卡面板。默认情况下,当一个 `el-tabs` 组件被创建时,第一个 tab 会被设置为选中的状态,并显示其对应的面板内容。如果 `el-tabs` 没有手动设置初始激活的 tab,那么它会按照 tab 的 `order` 或者标签的插入顺序来决定第一个激活的 tab。
默认情况下,你可以在 HTML 结构中这样使用:
```html
<el-tabs>
<el-tab-pane label="Tab 1">内容 1</el-tab-pane>
<el-tab-pane label="Tab 2">内容 2</el-tab-pane>
<el-tab-pane label="Tab 3">内容 3</el-tab-pane>
</el-tabs>
```
在这个例子中,"Tab 1" 就会是默认的第一个显示的tab。
如果你想要自定义第一个激活的 tab,可以使用 `active-name` 或 `active-key` 属性,例如:
```html
<el-tabs :active-name="firstTabName">
<el-tab-pane label="Tab 1" name="tab1">内容 1</el-tab-pane>
<el-tab-pane label="Tab 2" name="tab2">内容 2</el-tab-pane>
<el-tab-pane label="Tab 3" name="tab3">内容 3</el-tab-pane>
</el-tabs>
```
然后在你的 JavaScript 代码中设置 `firstTabName`:
```javascript
data() {
return {
firstTabName: 'tab1', // 设置为 "tab1"
};
}
```
阅读全文