[JavaScript知识库]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标签页
    }
}