Elment-ui中实现el-steps和el-tabs步骤联动

关注

已于 2022-01-27 10:42:54 修改 · 1.3k 阅读

原创 ·

本内容遵循 CC 4.0 BY-SA 版权协议

＜ elementUI组件样式及功能补全：实现点击steps组件跳转对应步骤＞在 Vue + elementUi 开发中，elementUI中steps步骤条组件只提供了change方法，并未提供各个步骤的点击跳转方法。在实际项目使用中，如果步骤条并非一步一步进行，而是有步骤跳转。那么就需要自己去自定义DIY了。接下来，简单阐述下，开发中使用方法！阅读详情

     <!-- 步骤条区域 -->
      <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 v-model="activeIndex" :tab-position="'left'" style="height: 200px">
    // 给对应el-tab-pane标签绑定name属性，name的值会存储到v-model中
        <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>

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

给对应el-tab-pane标签绑定name属性，name的值会存储到v-model中，注意此时name存储到data数据当中的是字符串类型的数字，而el-steps中 :active 接收的是纯数字类型的索引值，所以要通过数学加0或者减0实现字符串转数字的效果

el-steps中 :active 控制当先到第几个步骤。

通过el-tab-pane标签绑定name属性控制v-model绑定的data数据在el-steps中通过给 :active赋对应值实现俩个组件间的联动效果

收录于