<> Simple association between step bar and tab

1. Step bar :

Step bar acitve Property is used to set the currently active step , The type is number
<el-steps :active="active - 0" finish-status="success"> <el-step title=" step 1">
</el-step> <el-step title=" step 2"></el-step> <el-step title=" step 3"></el-step> </
el-steps>
2. Tab :

Tab v-model In the property binding tab name value , The type is string
<el-tabs :tab-position="tabPosition" style="height: 200px" v-model="active"> <
el-tab-pane name="0" label=" user management "> user management </el-tab-pane> <el-tab-pane name="1" label
=" configuration management "> configuration management </el-tab-pane> <el-tab-pane name="2" label=" Role management "> Role management </el-tab-pane>
</el-tabs>
3. Connect the two , You just need to active and v-model Bind the same variable , But the former is number, The latter is string, So in the step bar active
Minus the value of 0 Just fine

Technology
©2019-2020 Toolsou All rights reserved,
VUE+Canvas Achieve desktop Pinball brick elimination games C/C++ Memory model 2019PHP Interview questions ( Continuously updated )PHPspringboot2 Separation of front and rear platforms ,token Put in header Pit for verification Vue SpringBoot conduct Excel download element-ui Step on pit record 45 The 12-year-old programmer was turned down , Is the workplace wrong ?Python Web frame Pandas Fundamentals of statistical analysis _ data processing (DataFrame Common operations )Java Misunderstanding —— Method overloading is a manifestation of polymorphism ?