element ui tabs,element的tab页面切换
本文主要介绍了元素中步骤与标签页关联的解决方案。通过示例代码进行了非常详细的介绍，对于大家的学习或者工作都有一定的参考价值。如果你需要，让我们和边肖一起学习吧。
步骤条和标签页的简单关联
1.步骤条：
步骤的acitve属性用于设置当前活动的步骤，类型为number。
el-steps :active=active - 0 完成-状态=成功
El-step title= step 1/el-step
El-step title= step 2/el-step
El-step title= step 3/el-step
/El-步骤
2.标签页：
页面的v-model属性绑定选项卡中的名称值属于字符串类型。
El-tabs:tab-position= tab position style= height:200 px v-model= active
El-tab-pane name= 0 label= user management 用户管理/el-tab-pane
El-tab-pane name=1 label=配置管理配置管理/el-tab-pane
El-tab-pane name= 2 label= role management 角色管理/el-tab-pane
/el-tabs
3.让两者关联，你只需要把active和v-model绑定到同一个变量，但是前者是number，后者是string，所以在step栏里active的值减去0就好了。
示例2
step:的activeIndex值匹配tab页的el-tab-pane的name属性，tab页切换影响v-model值。
电子贺卡
El-alert title=修改商品信息 type= info :closed= false center show-icon/El-alert
El-steps:space= 200 :active= active index-0 align-center finish-status= success
El-step title=基本信息/el-step
El-step title=商品参数/el-step
El-step title=商品属性/el-step
El-step title=商品图片/el-step
El-step title=商品内容/el-step
El-step title=完成/el-step
/El-步骤
El-tabs:tab-position= tab position style= height:200 px；tab position= left v-model= active index
El-tab-pane label=基本信息 name=0 基本信息/el-tab-pane
El-tab-pane标签=商品参数名称=1 配置管理/el-tab-pane
El-tab-pane label=商品属性 name=2 角色管理/el-tab-pane
El-tab-pane label= commodity picture name= 3 定时任务补偿/el-tab-pane
El-tab-pane label= commodity content name= 4 定时任务补偿/el-tab-pane
/el-tabs
/电子名片
data(){
返回{
active index:“0”
}
}
这就是本文关于element中步骤和标签页之间关联的解决方案。有关element中步骤和选项卡之间关联的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。