element-ui的tabs默認選中頁簽

Element-UI提供了tabs組件（選項卡、多頁簽），其中在tabs的屬性中提供了一個value/v-model屬性來綁定默認選中的頁簽。

我們通過簡單的示例來看一下具體是怎么使用的。

<template>
  <el-tabs v-model="activeTab" @tab-click="tabClick">
    <el-tab-pane label="我愛你" name="yanggb1">我愛你</el-tab-pane>
    <el-tab-pane label="我好愛你" name="yanggb2">我好愛你</el-tab-pane>
    <el-tab-pane label="我超愛你" name="yanggb3">我超愛你</el-tab-pane>
    <el-tab-pane label="我真的愛你" name="yanggb4">我真的愛你</el-tab-pane>
  </el-tabs>
</template>

這里我將v-model的屬性值設置為activeTab，接下來就可以在JavaScript中對這個屬性值進行數據綁定。

export default {
    data() {
        return {
            activeTab: 'yanggb2'
        };
    }
};

這樣，在初始化頁面的時候，就會默認選中第二個頁簽了。

 

"我不能悲傷地呆在你身旁。"