el-tabs默认触发第一个
时间: 2025-01-22 22:49:40 浏览: 60
### 关于 `el-tabs` 默认激活首个标签页
为了实现 `el-tabs` 组件默认激活第一个标签页的效果,在 Vue3 和 Element Plus 中,可以利用 `v-model` 或者 `model-value` 属性绑定当前选中的标签名称或索引。通过初始化这个属性的值为第一个标签对应的键名或者索引即可达到目的。
当页面加载完成时,默认会显示设置好的活动面板内容。具体来说:
- 如果使用字符串类型的 `name` 来标识各个 `el-tab-pane`,则可以在父级组件的数据对象里定义一个变量用于存储初始状态下要激活的标签的名字,并将其赋给 `v-model`。
```javascript
data() {
return {
activeName: 'first' // 这里的 first 是第一个 el-tab-pane 的 name 属性值
};
}
```
- 若采用数值型索引来表示,则可以直接指定数组的第一个元素作为默认项[^1]。
对于上述两种情况下的 HTML 结构部分如下所示:
```html
<template>
<el-tabs v-model="activeName">
<!-- 假设这是第一个 tab -->
<el-tab-pane label="Tab One" name="first">Content of Tab Pane 1</el-tab-pane>
<!-- 后续其他tabs... -->
</el-tabs>
</template>
<script setup lang="ts">
import { ref } from "vue";
const activeName = ref('first');
</script>
```
如果希望基于索引的方式来进行操作,那么只需要调整 `ref` 初始化的部分以及对应 `el-tab-pane` 上不再需要显式的 `name` 属性而是依赖顺序自动匹配。
```html
<template>
<el-tabs :model-value="0">
<el-tab-pane>Default Active Content</el-tab-pane>
<el-tab-pane>Title Two</el-tab-pane>
...
</el-tabs>
</template>
<script setup lang="ts">
// 不再单独声明 activeName ,因为这里直接用了 index 形式
</script>
```
以上就是有关如何配置 `el-tabs` 让其默认激活首张卡片的方法介绍[^2]。
阅读全文
相关推荐

















