左侧是竖着的流程条，右侧是折叠面板，这两侧都是遍历生成的。当右侧的el-collapse折叠面板展开时，左侧的流程条长度也跟着改变，该怎么实现

这种交互效果通常可以通过JavaScript和Vue.js或者React等前端框架来实现。下面是一个简化的步骤描述：

1. **HTML结构**：首先，你需要创建一个包含流程条和折叠面板的HTML结构。流程条可以使用`<div>`或`<ul>`来表示，折叠面板则可以用Vuetify或Ant Design这类库提供的`v-collapsible`或`el-collapse`组件。

<div class="left-side">
  <ul v-if="isPanelOpen" :style="{ width: collapsedWidth }">...</ul>
</div>
<div class="right-side">
  <el-collapse ref="collapse">
    <el-collapse-item>...</el-collapse-item>
  </el-collapse>
</div>

2. **Vue绑定状态**：在Vue组件中，声明一个状态变量`isPanelOpen`控制折叠面板是否展开，并设置`collapsedWidth`作为展开时流程条的宽度，初始值设为0或折叠状态下的长度。

data() {
  return {
    isPanelOpen: false,
    collapsedWidth: "0px"
  };
}

3. **监听事件**：在折叠面板上添加`open-change`或相似的事件监听器，当面板打开时更新`isPanelOpen`并计算新的流程条宽度。

methods: {
  togglePanel() {
    this.isPanelOpen = !this.isPanelOpen;
    // 更新流程条长度，假设processList是流程条项数组
    const newLength = processList.length * someUnitSize; // someUnitSize是你设定每个条目占用的宽度单位
    this.collapsedWidth = this.isPanelOpen ? `${newLength}px` : '0px';
  }
},

4. **触发事件**：在需要的地方绑定`togglePanel`方法到折叠面板的`open-change`事件。

<el-collapse @open-change="togglePanel"></el-collapse>

5. **CSS样式**：最后，在CSS中处理流程条的动画效果，比如添加过渡(`transition`)属性使其平滑地变化长度。

.left-side {
  transition: width 0.3s ease;
}