vue+elementUI tab标签页

最近经常使用饿了么UI中的标签页，做一个小总结

<el-tabs
    tab-position="left"
    v-model="currentTab"
   @tab-click="handleClick"
 >
 	<el-tab-pane
        v-for="(item, index) in libTable"
        :key="index"
        :label="item.title"
        :name="item.libId"
    >
         <el-table :data="topicList">
            <el-table-column
               	label="题型"
               	align="center"
                prop="queType"
            />
         </el-table>
     </el-tab-pane>
 </el-tabs>

tab-position 表示标签页出现的位置，一般为 top 或者 left

name表示标签的名字，作为唯一标识。 label为标签页显示的文字

el-tab-pane表示标签的面板，我们从后台的数据里进行循环，这样可以有任意的标签头。

currentTab 作为初始值 表示显示哪一个tab页

handleClick为点击面板后触发的事件，我们可以在这个事件里改变table绑定的值，这样我们就实现了tab页。

data(){
	return {
      currentTab: "", //当前的tab标签页
    }
}

——————————————分割线———————————————

还有另一种用法 如果已经知道了有几个tab页 我们就写固定的

<el-tabs
    tab-position="left"
    v-model="activeName"
    @tab-click="handleClick"
 >
    <el-tab-pane
       label="单选题"
       name="单选题"
     >
    </el-tab-pane>
    
    <el-tab-pane
        label="多选题"
        name="多选题"
    >
 </el-tab-pane>
 </el-tabs>

data() {
    return {
      activeName: "单选题",    //默认显示这个标签页
    }
}