步驟條的 :activeIndex值 與 標簽頁的 el-tab-pane 的 name 屬性匹配,標簽頁切換影響 v-model 值
<el-card> <el-alert title="修改商品信息" type="info" :closable="false" center show-icon></el-alert> <el-steps :space="200" :active="activeIndex - 0" align-center 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> <el-tabs :tab-position="tabPosition" style="height: 200px;" tabPosition="left" v-model="activeIndex"> <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> data(){ return{ activeIndex: '0' } }
activeIndex須用"activeIndex - 0",進行字符串轉數字