<el-tabs>tab切换的使用

        最近在写vue的项目,项目中有遇到element-ui。所以vue和element-ui都是新手菜鸟级选手,下面将的使用方法总结如下:

如图所示,切换tab时,页面效果:

<el-tabs>tab切换的使用_第1张图片

  代码如下:


         首先参考官网地址:Element - The world's most popular Vue UI framework,如果下面文章中,有什么不懂的地方,可以自行前往官网学习,因为下面这边文章就是在官网的基础上写的。

        下面对的属性与方法做如下简单介绍:

1.属性

<el-tabs>tab切换的使用_第2张图片        通过上图,关于的七个属性我们已经介绍了6个,剩下一个第7个属性,大家可以看到该属性绑定了一个函数,是在切换tab之前触发的一个钩子,

        即:在事件 tab-click触发之前触发,具体写法如下图所示:

<el-tabs>tab切换的使用_第3张图片

2.事件,官网解释的很清除,不懂的话,写个demo试试就好了 

<el-tabs>tab切换的使用_第4张图片

3.属性  <el-tabs>tab切换的使用_第5张图片

你可能感兴趣的:(element-ui,el-tabs,el-tab-pane,before-leave,tab-click,value,/,v-model)