elementUI的步骤条+折叠面板

最新推荐文章于 2025-02-11 11:29:12 发布

管理员--0728

最新推荐文章于 2025-02-11 11:29:12 发布

阅读量2.6k

点赞数 1

分类专栏： elementUI 文章标签： vue elementui

本文链接：https://blog.csdn.net/hangzhou728/article/details/113844414

版权

elementUI 专栏收录该内容

2 篇文章

订阅专栏

该博客展示了如何使用Vue.js和Element UI库创建一个垂直方向的步骤条组件，组件包含可折叠的内容面板，每步内容展开与关闭由步骤状态控制。通过active属性和change事件处理步骤的激活状态和切换逻辑，实现了一个简洁的交互效果。

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

效果图

在这里插入图片描述

要求：折叠面板跟随步骤打开，到哪一步，打开哪一步的折叠面板

完整代码（因为步骤比较简单，就不做注释了，有问题可以留言）

<template>
  <div class="app-container">
    <div>
      <el-steps direction="vertical"
                finish-status="success"
                :active="Number(activeNames)">
        <el-step :title="i.stepTitle"
                 class="step"
                 v-for="i in stepList"
                 :key="i.id">
          <template slot="description">
            <div class="description">
              <div class="descriptionText">
                <el-collapse v-model="activeNames"
                             accordion
                             @change="handleChange">
                  <el-collapse-item :title="i.title"
                                    :name="i.name">
                    <div>{{i.text}}</div>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </div>
          </template>
        </el-step>
      </el-steps>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeNames: '1',
      active: 0,
      stepList: [
        {
          name: '1',
          title: '第一条',
          stepTitle: '步骤1',
          id: 1,
          text: '第一条的内容',
        },
        {
          name: '2',
          title: '第二条',
          stepTitle: '步骤2',
          id: 2,
          text: '第二条的内容',
        },
        {
          name: '3',
          title: '第三条',
          stepTitle: '步骤3',
          id: 3,
          text: '第三条的内容',
        },
      ],
    };
  },
  methods: {
    handleChange() {
      if (this.active++ > 3) {
        this.active = 0;
        this.activeNamesNum = 0;
      } else {
        this.activeNamesNum++;
      }
      console.log(this.activeNames);
    },
  },
};
</script>

<style scoped>
.line {
  text-align: center;
}
.step {
  width: 320px;
}
.step ::v-deep .el-step__description {
  padding-right: 0;
  padding-bottom: 6px;
}
.step ::v-deep .el-collapse-item__content {
  padding-bottom: 12px;
}
.step ::v-deep .el-collapse-item__header {
  height: 32px;
  line-height: 32px;
  border: none;
}
.testRight ::v-deep .el-step.is-vertical .el-step__title {
  line-height: 18px;
  padding-bottom: 12px;
}
.step .description {
  width: 100%;
}
</style>