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 相关文章推荐
用JavaScript和注册表脚本实现右键收藏Web页选中文本
Jan 28 Javascript
用javascript实现给出的盒子的序列是否可连为一矩型
Aug 30 Javascript
jQuery插件 tabBox实现代码
Feb 09 Javascript
js浮点数精确计算(加、减、乘、除)
Dec 26 Javascript
JavaScript中的继承之类继承
May 01 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
Oct 26 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
Apr 05 Javascript
js经验分享 JavaScript反调试技巧
Mar 10 Javascript
Javascript 之封装(Package)
Sep 14 Javascript
详解新手使用vue-router传参时注意事项
Jun 06 Javascript
vue组件开发之slider组件使用详解
Aug 21 Javascript
vue3中轻松实现switch功能组件的全过程
Jan 07 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实现的网站目录扫描索引工具
2016/09/08 PHP
phpinfo()中Loaded Configuration File(none)的解决方法
2017/01/16 PHP
详解PHP中的外观模式facade pattern
2018/02/05 PHP
php layui实现前端多图上传实例
2019/07/30 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
function foo的原型与prototype属性解惑
2010/11/19 Javascript
Dom 结点创建 基础知识
2011/10/01 Javascript
js自动闭合html标签(自动补全html标记)
2012/10/04 Javascript
NodeJS url验证(url-valid)的使用方法
2013/11/18 NodeJs
JQUERY的AJAX请求缓存里的数据问题处理
2016/02/23 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
JS仿京东移动端手指拨动切换轮播图效果
2020/04/10 Javascript
详解nodejs 文本操作模块-fs模块(四)
2016/12/22 NodeJs
js脚本编写简单刷票投票系统
2017/06/27 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
vue.js实现标签页切换效果
2018/06/07 Javascript
vue router 配置路由的方法
2018/07/26 Javascript
小程序实现授权登陆的解决方案
2018/12/02 Javascript
JS实现将对象转化为数组的方法分析
2019/01/21 Javascript
node Buffer缓存区常见操作示例
2019/05/04 Javascript
jQuery控制input只能输入数字和两位小数的方法
2019/05/16 jQuery
Python迭代器和生成器介绍
2015/03/06 Python
Python的Django框架安装全攻略
2015/07/15 Python
深入浅出学习python装饰器
2017/09/29 Python
Python基于hashlib模块的文件MD5一致性加密验证示例
2018/02/10 Python
Python批处理删除和重命名文件夹的实例
2018/07/11 Python
python读取各种文件数据方法解析
2018/12/29 Python
解决Python spyder显示不全df列和行的问题
2020/04/20 Python
记一次Django响应超慢的解决过程
2020/09/17 Python
心理健康课教学反思
2014/02/13 职场文书
护理专业自荐信范文
2014/02/26 职场文书
亲属关系公证书
2014/04/08 职场文书
学校志愿者活动总结
2014/06/27 职场文书
公司授权委托书格式样本
2014/10/01 职场文书
软弱涣散基层党组织整改方案
2014/10/25 职场文书
《平移和旋转》教学反思
2016/02/19 职场文书