vue结合ElementUI如何实现Steps步骤条组件和Tabs标签页组件联动
⼀、Element UI中Steps和Tabs组件联动
1. 引⼊Steps步骤条组件，space属性是每个step 的间距，不填写将⾃适应间距，⽀持百分⽐，我们可以设置⼀个值，⽐如200，这样
每⼀个step步骤会保持⼀定的距离。finish-status属性是设置结束步骤的状态，可以设置为success，成功状态。align-center 属性是让步骤条居中对齐。active是设置当前激活步骤，是number类型的值。由于每⼀个激活的步骤是动态变化的，可以设置变
量，activeIndex，进⾏绑定，代码如下：
<!-- 步骤条区域 -->
<el-steps :space="200":active="activeIndex - 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>
2. 在data中定义activeIndex的值，默认是 '0'，是⼀个字符串的值，⽽active是接收的数值类型的值，所以在active中，设置 activeIndex
- 0 就可以将字符串转换为数值类型的值，代码如下：
data(){
return{
activeIndex:'0'
}
}
3. 引⼊Tabs 标签页组件，tab-position 属性是选项卡所在位置，是⼀个String类型的值，可以设置为 'left'，这样就可以左对齐了。 v-
model 属性是绑定值，选中选项卡的 name，是⼀个String类型的值，我们可以绑定data中的activeIndex。style是设置样式的属性，可以设置⼀下⾼度为200px。在每⼀个el-tab-pane中，label 是选项卡标题，可以展⽰选项卡的内容。name属性是与选项卡
activeName 对应的标识符，表⽰选项卡别名，是⼀个String类型，默认值为该选项卡在选项卡列表中的顺序值，如第⼀个选项卡则为'1'。所以我们可以为每⼀个el-tab-pane去指定name的值，'0','1','2'等等。这样就可以实现Steps步骤条组件和Tabs标签页组件联动，代码如下：
<!-- tab栏区域 -->
<el-tabs :tab-position="'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>
4. 在第⼀个tab的内容没有写完的时候，是不能够切换到第⼆个tab，阻⽌标签页的切换，我们可以使⽤Tabs中的before-leave。before-
leave是切换标签之前的钩⼦，若返回 false 或者返回Promise且被 reject，则阻⽌切换，Function(activeName, oldActiveName)，传⼊两个参数。第⼀个参数是activeName，即将进⼊的标签页，第⼆个参数是oldActiveName，即将离开的标签页。我们可以通过即将离开的标签页el-tab-pane的name的值为'0'，并且表单所获取的数据长度去判断，代码如下：
beforeTabLeave(activeName, oldActiveName){
if(oldActiveName ==='0'&&ds_cat.length !==3){
this.$('请先选择商品分类！')
return false
}
},
⼆、Element UI中Steps和Tabs组件联动的实现
1. Element UI中Steps和Tabs组件联动的实现，完整代码如下：
<template>
<div>
<!-- 卡⽚视图 -->
<el-card>
<!-- 提⽰区域 -->
<el-alert title="添加商品信息"type="info"center show-icon:closable="false"></el-alert> <!-- 步骤条区域 -->
<el-steps :space="200":active="activeIndex - 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="'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>
</div>
</template>
<script>
export default{
data(){
return{
activeIndex:'0'
}
}
}
</script>
<style lang="less"scoped>
</style>
2.Element UI中Steps和Tabs组件联动的实现，实现效果如下：
position标签属性

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。