elementUI使用中默认tab的设置

Question

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

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

Answer 1

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

Answer 2

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