Vue项目中实现tab栏和步骤条的数据联动

Posted wangdong9395

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue项目中实现tab栏和步骤条的数据联动相关的知识,希望对你有一定的参考价值。

也就是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栏和步骤条的数据联动的主要内容,如果未能解决你的问题,请参考以下文章

vue中实现后台管理标签页

在Vue项目中实现数据可视化操作

Vue中实现与后台的数据交换(vue-resource)

电商前台项目:完成Home首页模块业务

Vue(小案例)底部tab栏和顶部title栏的实现

vue 使用element 菜单与tab页联动