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