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

 更新时间:2020年12月08日 17:03:49   作者:向天再借五百根  
这篇文章主要介绍了element中Steps步骤条和Tabs标签页关联的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

在这里插入图片描述

1.步骤条:

在这里插入图片描述

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

<el-steps :active="active - 0" finish-status="success">
  <el-step title="步骤 1"></el-step>
  <el-step title="步骤 2"></el-step>
  <el-step title="步骤 3"></el-step>
</el-steps>

2.标签页:

在这里插入图片描述

在这里插入图片描述

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

<el-tabs :tab-position="tabPosition" style="height: 200px" v-model="active">
  <el-tab-pane name="0" label="用户管理">用户管理</el-tab-pane>
  <el-tab-pane name="1" label="配置管理">配置管理</el-tab-pane>
  <el-tab-pane name="2" label="角色管理">角色管理</el-tab-pane>
</el-tabs>

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

示例2

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

<el-card>
  <el-alert title="修改商品信息" type="info" :closable="false" center show-icon></el-alert>
  <el-steps :space="200" :active="activeIndex - 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-steps>
  <el-tabs :tab-position="tabPosition" style="height: 200px;" tabPosition="left" v-model="activeIndex">
  <el-tab-pane label="基本信息" name="0">基本信息</el-tab-pane>
  <el-tab-pane label="商品参数" name="1">配置管理</el-tab-pane>
  <el-tab-pane label="商品属性" name="2">角色管理</el-tab-pane>
  <el-tab-pane label="商品图片" name="3">定时任务补偿</el-tab-pane>
  <el-tab-pane label="商品内容" name="4">定时任务补偿</el-tab-pane>
  </el-tabs>
 </el-card>


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

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

相关文章

  • vue3渲染函数(h函数)的变更剖析

    vue3渲染函数(h函数)的变更剖析

    这篇文章主要介绍了vue3渲染函数(h函数)的变化,文中给大家介绍了h函数的三个参数详细说明及vue3 h函数-绑定事件,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-10-10
  • 样式穿透vue中的scoped详谈

    样式穿透vue中的scoped详谈

    这篇文章主要为大家介绍了样式穿透vue中的scoped示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • Vue+Element Plus实现自定义日期选择器

    Vue+Element Plus实现自定义日期选择器

    这篇文章主要为大家详细介绍了如何基于Vue和Element Plus提供的现有组件,设计并实现了一个自定义的日期选择器组件,感兴趣的小伙伴可以参考一下
    2024-12-12
  • vue实现二级弹框案例

    vue实现二级弹框案例

    这篇文章主要为大家详细介绍了vue实现二级弹框案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • 利用vue3仿苹果系统侧边消息提示效果实例

    利用vue3仿苹果系统侧边消息提示效果实例

    这篇文章主要给大家介绍了关于如何利用vue3仿苹果系统侧边消息提示效果的相关资料,文中通过实例代码以及图文介绍的非常详细,对大家学习或者使用vue3具有一定的参考学习价值,需要的朋友可以参考下
    2021-12-12
  • vue 如何配置eslint代码检查

    vue 如何配置eslint代码检查

    这篇文章主要介绍了vue 如何配置eslint代码检查,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue多级复杂列表展开/折叠及全选/分组全选实现

    vue多级复杂列表展开/折叠及全选/分组全选实现

    这篇文章主要介绍了vue多级复杂列表展开/折叠及全选/分组全选实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 利用Vue Native构建移动应用的全过程记录

    利用Vue Native构建移动应用的全过程记录

    VueNative是一个使用JavaScript构建跨平台原生移动应用程序的框架m这篇文章主要给大家介绍了关于如何利用Vue Native构建移动应用的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2021-08-08
  • Vue-cli3简单使用(图文步骤)

    Vue-cli3简单使用(图文步骤)

    这篇文章主要介绍了Vue-cli3简单使用(图文步骤),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • vue子组件实时获取父组件的数据实现

    vue子组件实时获取父组件的数据实现

    本文主要介绍了vue子组件实时获取父组件的数据实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-12-12

最新评论