【Vue】elementUI使用中默认tab的设置

<el-tabs type="border-card" @tab-click="changeSys">
<el-tab-pane v-for="sys in systems" :label="sys.title" :name="sys.id" :key="sys.id" v-model='selectTab'>
<el-table :data="users">
<el-table-column prop="name" label="账户" width="200px" sortable></el-table-column>
<el-table-column prop="realname" label="姓名" width="200px" sortable></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button @click="showDetail(scope.row)" type="text" size="small">查看详情</el-button>
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>

【Vue】elementUI使用中默认tab的设置

进去之后不会在默认tab上，请教下为什么，以及如何解决。

回答

<el-tabs type="border-card" @tab-click="changeSys" v-model="activeName">
// ...sometings
data() {
    return {
        activeName: ''
    }
},
created() {
    // todo
    this.activeName = systems[0].id;
}

el-tabs 上加 v-model="activeName"
activeName 设置为默认 el-tab-pane 对应的 name

以上是 【Vue】elementUI使用中默认tab的设置 的全部内容， 来源链接： utcz.com/a/81864.html

回到顶部