element中Steps步骤条和Tabs标签页关联的解决

步骤条和标签页的简单关联

element中Steps步骤条和Tabs标签页关联的解决_第1张图片

1.步骤条:

在这里插入图片描述

步骤条的acitve属性用来设置当前激活的步骤,类型为number


  
  
  

2.标签页:

在这里插入图片描述

在这里插入图片描述

标签页的v-model属性绑定选项卡中的name值,类型为string


  用户管理
  配置管理
  角色管理

3.让两者关联,只需要将activev-model绑定同一个变量即可,但是前者是number,后者是string,所以在步骤条的active的值上减个0就好了

示例2

步骤条的 :activeIndex值 与 标签页的 el-tab-pane 的 name 属性匹配,标签页切换影响 v-model 值


  
  
  
  
  
  
  
  
  
  
  基本信息
  配置管理
  角色管理
  定时任务补偿
  定时任务补偿
  
 


data(){
 return{
  activeIndex: '0'
 }
}

到此这篇关于element中Steps步骤条和Tabs标签页关联的解决的文章就介绍到这了,更多相关element中Steps和Tabs关联内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

你可能感兴趣的:(element中Steps步骤条和Tabs标签页关联的解决)