也就是tab栏切换步骤条随之变化

<template>
  <div>
    <!-- 面包屑导航  -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区 -->
    <el-card>
      <!-- 提示信息 -->
      <el-alert title="添加商品信息" type="info" center show-icon> </el-alert>
      <!-- 步骤条 -->
      <el-steps
        :space="200"
        :active="activeNum - 0"
        finish-status="success"
        align-center
      >
        <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>
      <!-- tab标签 -->
      <el-tabs
        :tab-position="tabPosition"
        style="height: 200px;"
        :before-leave="beforeLeave"
      >
        <el-tab-pane label="基本信息">
          <el-form ref="form">
            <el-form-item label="商品名称">
              <el-input></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="商品参数">商品参数</el-tab-pane>
        <el-tab-pane label="商品属性">商品属性</el-tab-pane>
        <el-tab-pane label="商品属性">商品图性</el-tab-pane>
        <el-tab-pane label="商品内容">商品内容</el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tabPosition: 'left',
      activeNum: 0
    }
  },
  methods: {
    beforeLeave(activeName, oldActiveName) {
      // activeName打印出来是分别是0,1,2....
      this.activeNum = activeName
    }
  }
}
</script>
<style lang="less" scoped></style>

Vue项目中实现tab栏和步骤条的数据联动的更多相关文章

  1. vue项目中的tab页实现

    //需要自己弄雪碧图 <template> <div class="tab" id="tab"> <router-link to= ...

  2. vue项目中vant tab改变标签颜色

    找了几种方法,只有下面这个方法是生效的: <van-tabs v-model="active" sticky title-active-color="#144a9e ...

  3. 前端学习笔记系列一:10整体移动vscode代码块、VSCode 使用 stylus,配置格式化设置、在vue项目中引入bootstrap

    1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...

  4. vue项目中遇到的那些事。

    前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...

  5. vue项目中使用iconMoon图标

    前两篇文章写了一下如何在vue项目中使用vue-awesome和阿里的iconfont,这里介绍一下如何使用iconMoon图标 iconMoon和前两者相比可以生成自己的矢量图,这点是我喜欢的.至于 ...

  6. vue项目中使用阿里iconfont图标

    在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标 ...

  7. dom元素的tabindex属性介绍及在vue项目中的应用

    dom元素的tabindex属性介绍及在vue项目中的应用 tabindex属性作用 让普通dom元素变为可聚焦的元素 让普通dom元素可以参与顺序键盘导航(通常使用Tab键,因此得名). tabin ...

  8. Vue项目中同级组件传值的例子

    大家好,今天给大家带来Vue项目中同级组件之间传值的例子,父子组件之间的通信比较简单,这里不做讨论. 假设该项目中的需求如下: 图中左上角有一个按钮,我们的需求是点击它时,侧边导航栏收缩且主界面放大, ...

  9. vue项目中使用bpmn-流程图预览篇

    前情提要 上文已经实现了节点操作的前进.后退.导入.导出等操作,今日来实现“流程图预览”,以及视图的放大缩小 前提:项目安装过bpmn,安装可见上篇文章 实现要点 bpmn提供了两个神器:Modele ...

随机推荐

  1. BZOJ 1601 [Usaco2008 Oct]灌水 (建图+mst)

    题意: 300个坑,每个坑能从别的坑引水,或者自己出水,i从j饮水有个代价,每个坑自己饮水也有代价,问让所有坑都有谁的最少代价 思路: 先建一个n的完全图,然后建一个超级汇点,对每个点连w[i],跑m ...

  2. java14带参的方法

    public class jh_01_如何使用带参数的方法31 { public static void main(String[] args) { // 创建对象 ZhaZhiJi zzj = ne ...

  3. 技术|Android安装包优化

    版权声明 1.本文版权归原作者所有,转载需注明作者信息及原文出处. 2.本文作者:赵裕(vimerzhao),永久链接:https://github.com/vimerzhao/vimerzhao.g ...

  4. Invoking Descriptors - Python 描述符的用法建议

    描述符用法建议, 内置的 property 类创建的是'覆盖型'(date descriptor), 实现了 __set__ 和 __get__. 特性 property 的 __set__ 方法 默 ...

  5. CentOS7.3下yum安装MariaDB10.3.12并指定utf8字符集

    添加MariaDB的yum源,指定安装的版本,然后使用 yum 工具进行安装 参考MariaDB官方网站对应安装方法和步骤 https://downloads.mariadb.org/mariadb/ ...

  6. mysql5.5编译安装

    MySQL是一个关系型数据库管理系统 ,由瑞典MySQL AB公司开发,目前属于Oracle 公司.MySQL分为社区版和商业版,由于其体积小.速度快.总体拥有成本低,尤其是开放源码 这一特点,一般中 ...

  7. apereo cas 小记01--服务器搭建01

    ---恢复内容开始--- github repository:  apereo/cas 一,获取项目 链接:https://github.com/apereo/cas-overlay-template ...

  8. 【学习笔记】:JavaScript中的BOM对象

    JavaScript中的BOM对象 BOM(Browser Object Model):浏览器对象模型. BOM可用于对浏览器窗口进行访问,但BOM没有相关的标准,所以根据浏览器的不同,其中定义的对象 ...

  9. Java自学-多线程 启动一个线程

    Java 创建一个线程的三种方式 多线程即在同一时间,可以做多件事情. 创建多线程有3种方式,分别是继承线程类,实现Runnable接口,匿名类 步骤 1 : 线程概念 首先要理解进程(Process ...

  10. 在centos7.x环境中SQL Server附加数据库

    第一步,准备好windows与Linux之间文件传递的工具,下载并安装 https://winscp.net/eng/download.php 第二步,把本地的数据库文件拷贝一份,放到别的文件夹中,因 ...