element中Steps步骤条和Tabs标签页关联的解决-6ren

element中Steps步骤条和Tabs标签页关联的解决

转载作者：qq735679552 更新时间：2022-09-27 22:32:09

27

4

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章element中Steps步骤条和Tabs标签页关联的解决由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

步骤条和标签页的简单关联。

element中Steps步骤条和Tabs标签页关联的解决

1.步骤条:

element中Steps步骤条和Tabs标签页关联的解决

步骤条的acitve属性用来设置当前激活的步骤，类型为number 。

2.标签页:

element中Steps步骤条和Tabs标签页关联的解决

标签页的v-model属性绑定选项卡中的name值，类型为string 。

3.让两者关联，只需要将active和v-model绑定同一个变量即可，但是前者是number，后者是string，所以在步骤条的active的值上减个0就好了。

示例2 。

步骤条的：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"
}
}

到此这篇关于element中Steps步骤条和Tabs标签页关联的解决的文章就介绍到这了,更多相关element中Steps和Tabs关联内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我！。

原文链接：https://blog.csdn.net/weixin_47300932/article/details/110754301 。

最后此篇关于element中Steps步骤条和Tabs标签页关联的解决的文章就讲到这里了,如果你想了解更多关于element中Steps步骤条和Tabs标签页关联的解决的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！。

27

4

0