vue结合Element UI如何实现Steps步骤条组件和Tabs标签页组件联动

深碍√TFBOYSˉ_ 2023-07-06 13:28 30阅读 0赞

#### 一、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>

1.  在`data`中定义`activeIndex`的值，默认是 `'0'`，是一个字符串的值，而`active`是接收的数值类型的值，所以在`active`中，设置 `activeIndex - 0` 就可以将字符串转换为数值类型的值，代码如下：

data() { 
        return { 
          activeIndex: '0'
        }
     }

1.  引入`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`标签页组件联动，代码如下：

<el-tabs :tab-position="'left'" v-model="activeIndex" 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>

1.  在第一个`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' && this.addForm.goods_cat.length !== 3) { 
            this.$message.error('请先选择商品分类！')
            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>
    
                
                <el-tabs :tab-position="'left'" v-model="activeIndex" 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 { data() { return { activeIndex: '0' } } } </script>
    
    <style lang="less" scoped> </style>

2.**Element UI中Steps和Tabs组件联动的实现**，实现效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200219215059806.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjYxNDA4MA==,size_16,color_FFFFFF,t_70