vue项目中应用elementUI的步骤条+折叠面板,达到如图效果

最新推荐文章于 2024-09-11 15:00:14 发布

爱好jyh

最新推荐文章于 2024-09-11 15:00:14 发布

阅读量2.2w

点赞数 1

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

本文链接：https://blog.youkuaiyun.com/weixin_42884584/article/details/81483088

版权

本文介绍如何在Vue项目中结合ElementUI，实现点击步骤条展开相应内容的功能。通过JavaScript控制步骤条和折叠面板的长度动态变化，步骤条与折叠面板的div采用左浮动布局，实现交互式的展示效果。

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

这里写图片描述

效果就是点击某个步骤就可以展开对应的内容.步骤条和折叠面板长度也会动态改变
都是通过元素js来改变长度.
先定义一个步骤条

<div style="width:130px;margin-top:20px;float:left">
  <el-steps :space="200" direction="vertical" :active="step" process-status="process" finish-status="wait">
      <el-step @click.native="on_click(1)" title="xxx" id="one"></el-step>
      <el-step @click.native="on_click(2)" title="xx" id="two"></el-step>
      <el-step @click.native="on_click(3)" title="xx" id="three"></el-step>
</el-steps>
</div>