vue项目中应用elementUI的步骤条+折叠面板,达到如图效果_el-collapse 折叠面板点击收起手动控制

效果就是点击某个步骤就可以展开对应的内容.步骤条和折叠面板长度也会动态改变
都是通过元素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>
1
2
3
4
5
6
7

再来个折叠面板,步骤条和折叠面板的div放在一个大的div中，这两个div设置为左浮动float=”left”

<div
1