鍍金池/ 問答/HTML/ elementUI使用中默認(rèn)tab的設(shè)置

elementUI使用中默認(rèn)tab的設(shè)置

<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>

clipboard.png

進(jìn)去之后不會(huì)在默認(rèn)tab上，請(qǐng)教下為什么，以及如何解決。

回答
編輯回答
呆萌傻

el-tabs 上加 v-model="activeName"
activeName 設(shè)置為默認(rèn) el-tab-pane 對(duì)應(yīng)的 name

2017年8月4日 10:32
編輯回答
默念
<el-tabs type="border-card" @tab-click="changeSys" v-model="activeName">
// ...sometings
data() {
    return {
        activeName: ''
    }
},
created() {
    // todo
    this.activeName = systems[0].id;
}
2018年8月13日 07:45