<el-row style="height: 500px;overflow-y: auto;"> <el-col :span="3" style="text-align:center;padding-top:20px;" v-for="(item,index) in processList" :key="index" @click.native="createProcess(item)"> <span> <!-- <svg-icon icon-class="menu" class-name="menu"/>--> <svg-icon :icon-class="item.imagePath" class-name="menu" /> </span> <span>{{ item.processName }}</span> </el-col> </el-row>增加什么样式让他自动换行
时间: 2024-01-03 16:38:20 浏览: 159
el-select-tree:ElementUI的el-select与el-tree结合
5星 · 资源好评率100%
要使el-col自动换行,您可以使用CSS的flex-wrap属性来实现。将flex-wrap设置为wrap,即可使元素自动换行。
以下是修改后的代码示例:
```vue
<el-row style="height: 500px; overflow-y: auto; flex-wrap: wrap;">
<el-col :span="3" style="text-align: center; padding-top: 20px;" v-for="(item, index) in processList" :key="index" @click.native="createProcess(item)">
<span>
<svg-icon :icon-class="item.imagePath" class-name="menu" />
</span>
<span>{{ item.processName }}</span>
</el-col>
</el-row>
```
在这个示例中,我们在el-row元素上添加了flex-wrap: wrap样式,这将使el-col元素在需要时自动换行。
希望这个修改能够满足您的需求。如果还有其他问题,请随时提问。
阅读全文