步骤条与Tab栏的联动 ~ 不要错过

原创于 2021-02-07 21:56:01 发布 · 306 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

43 篇文章

订阅专栏

这篇博客介绍了如何在Vue.js应用中实现步骤条（Steps）与Tab栏（Tabs）的联动效果。通过设置`activeIndex`属性，使得当用户在步骤条中切换时，对应的Tab内容也随之更新。示例代码展示了使用Element UI组件库创建步骤条和Tab栏，并通过`v-model`双向绑定`activeIndex`来同步两个组件的状态。这有助于在多步骤流程中提供更好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

步骤条与 Tab栏的联动

<!-- 步骤条区域 -->
      <!-- :active="activeIndex" 指定激活项的索引 (activeIndex 用于操作索引)-->
      <!-- align-center 步骤条居中 -->
      <!-- activeIndex - 0 将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>
      <!-- tab栏区域 -->
      <el-tabs
        v-model="activeIndex"
        :tab-position="'left'"
        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>

<script>
export default {
  data() {
    return {
      activeIndex: '0',
    }
  },
  created() {},
  methods: {},
}
</script>

步骤条与Tab栏的联动 ~ 不要错过

步骤条 与 Tab栏 的联动

步骤条与 Tab栏的联动