也就是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>