使用element-ui实现步骤条与tab标签页的连动
注意 el-tabs 中的 v-model 会自动关联 el-tab-pane 中的 name 值
通过 v-model 的变量与el-steps中的active值关联实现联动
<template>
<div>
<!-- 步骤条 -->
<el-steps
align-center
:active="active * 1"
show-icon
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>
<!-- Tab 标签 -->
<el-tabs
v-model="active"
:tab-position="tabPosition"
style="height: 200px;"
>
<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>
</div>
</template>
script>
export default {
name: "GoodsAdd",
data() {
return {
tabPosition: "left",
active: "0"
};
},
created() {},
methods: {}
};