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


Posted in Javascript onDecember 08, 2020

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

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

1.步骤条:

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

步骤条的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.标签页:

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

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

标签页的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关联内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
爱恋千雪-US-AscII加密解密工具(网页加密)下载
Jun 06 Javascript
基于jquery的图片幻灯展示源码
Jul 15 Javascript
JS DOM实现鼠标滑动图片效果
Sep 17 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
Apr 13 Javascript
基于jQuery实现中英文切换导航条效果
Sep 18 Javascript
JS实现倒计时(天数、时、分、秒)
Nov 16 Javascript
微信小程序封装http访问网络库实例代码
May 24 Javascript
JS中DOM元素的attribute与property属性示例详解
Sep 04 Javascript
angular 未登录状态拦截路由跳转的方法
Oct 09 Javascript
layui写后台表格思路和赋值用法详解
Nov 14 Javascript
简述Vue中容易被忽视的知识点
Dec 09 Javascript
关于vue-router-link选择样式设置
Apr 30 Vue.js
javascript全局自定义鼠标右键菜单
Dec 08 #Javascript
javascript局部自定义鼠标右键菜单
Dec 08 #Javascript
JavaScript对象访问器Getter及Setter原理解析
Dec 08 #Javascript
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 #Vue.js
vue添加自定义右键菜单的完整实例
Dec 08 #Vue.js
vue中如何自定义右键菜单详解
Dec 08 #Vue.js
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 #Vue.js
You might like
PHP 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
PHP实现邮件群发的源码
2013/06/18 PHP
PHP错误提示的关闭方法详解
2013/06/23 PHP
CI(CodeIgniter)框架配置
2014/06/10 PHP
php实现根据字符串生成对应数组的方法
2014/09/22 PHP
浅谈PHP中关于foreach使用引用变量的坑
2016/11/14 PHP
php实现生成code128条形码的方法详解
2017/07/19 PHP
详解PHP 二维数组排序保持键名不变
2019/03/06 PHP
Laravel框架自定义分页样式操作示例
2020/01/26 PHP
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
jQuery学习笔记之jQuery的事件
2010/12/22 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
2014/12/16 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
2015/07/27 Javascript
javascript实现拖动元素交换位置
2015/11/29 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
详解JS-- 浮点数运算处理
2016/11/28 Javascript
前端JS面试中常见的算法问题总结
2016/12/23 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
2017/09/26 Javascript
浅谈Node 调试工具入门教程
2018/03/20 Javascript
vue.js 中使用(...)运算符报错的解决方法
2018/08/09 Javascript
NVM安装nodejs的方法实用步骤
2019/01/16 NodeJs
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
leaflet加载geojson叠加显示功能代码
2020/02/21 Javascript
Python中的FTP通信模块ftplib的用法整理
2016/07/08 Python
python基础梳理(一)(推荐)
2019/04/06 Python
人工神经网络算法知识点总结
2019/06/11 Python
Python调用.NET库的方法步骤
2019/12/27 Python
mac 上配置Pycharm连接远程服务器并实现使用远程服务器Python解释器的方法
2020/03/19 Python
教你一分钟在win10终端成功安装Pytorch的方法步骤
2021/01/28 Python
英国网上香水店:Fragrance Direct
2016/07/20 全球购物
师范生自荐信范文
2013/10/06 职场文书
优秀本科生求职推荐信
2014/02/24 职场文书
工会换届选举方案
2014/05/21 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
四群教育工作总结
2015/08/10 职场文书
python ansible自动化运维工具执行流程
2021/06/24 Python