element ui tabs 动态组件,element ui单选框绑定事件

　　本文主要介绍el-tabs事件绑定在ElementUI中的具体使用。通过示例代码非常详细的介绍，对大家的学习或者工作都有一定的参考价值。有需要的朋友就跟着下面的边肖学习吧。

tabs组件的属性

tabs的属性

tabs的事件

　　选项卡窗格的属性

　　标签代码

　　el-tabs v-model=activeName

　　El选项卡窗格名称=0 标签=标签1/el选项卡窗格

　　El-tab-pane name= 1 label= label 1 /El-tab-pane

　　El-tab-pane name= 2 label= label 1 /El-tab-pane

　　/el-tabs

　　初始化数据“活动名称”的值

　　data() {

　　返回{

　　活动名称：“0”，

　　}

　　}

　　使用watch监控“活动名称”的变化，以响应不同的事件。

　　观察：{

　　 ActiveName:function(val) {//监控开关状态-计划订单

　　let urlStr=/index/test？tabid= val

　　这个。$ router . push(urlStr)；

　　//注意，根据不同的val跳转到不同的

　　},

　　}

　　在创建中获取URL参数。

　　已创建(){

　　如果(这个。$route.query.tabid) {

　　this.activeName=this。$ route . query . tabid；

　　}否则{

　　this . active name=0；

　　}

　　},

　　补充：tab-click绑定事件可以直接使用。

　　模板

　　El-tabs v-model= active name @ ta B- click= handle click

　　El-tab-pane标签=用户管理名称=第一个用户管理/el-tab-pane

　　El-tab-pane label=配置管理 name=第二个配置管理/el-tab-pane

　　/el-tabs

　　/模板

　　脚本

　　导出默认值{

　　data() {

　　返回{

　　活动名称：“第二个”

　　};

　　},

　　方法：{

　　handleClick(选项卡，事件){

　　console.log(选项卡，事件)；

　　if(tab.name==second){

　　//触发“配置管理”事件

　　this.second

　　}否则{

　　//触发“用户管理”事件

　　this . first()；

　　}

　　},

　　/**

　　*触发用户管理事件。

　　*/

　　first(){

　　Console.log(我是用户管理)；

　　},

　　/**

　　*触发配置管理事件。

　　*/

　　秒(){

　　Console.log(我是配置管理)；

　　}

　　}

　　};

　　/脚本

　　关于el-tabs事件绑定在ElementUI中的具体使用，本文到此结束。有关元素UI中El-Tabs事件绑定的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。