<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>增加什么样式让他自动换行

要使el-col自动换行，您可以使用CSS的flex-wrap属性来实现。将flex-wrap设置为wrap，即可使元素自动换行。

以下是修改后的代码示例：

<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元素在需要时自动换行。

希望这个修改能够满足您的需求。如果还有其他问题，请随时提问。

相关问题

<el-row style="flex-wrap: wrap;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> 让他每行居左开始

要让el-col每行居左开始，您可以使用flex布局的`justify-content`属性来实现。将`justify-content`设置为`flex-start`，即可使每行元素左对齐。

以下是修改后的代码示例：

<el-row style="flex-wrap: wrap;height: 500px;overflow-y: auto; justify-content: flex-start;">
  <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`元素上添加了`justify-content: flex-start;`样式，使得每行的元素居左开始对齐。

希望这个修正能够满足您的需求。如果还有其他问题，请随时提出。

<template slot-scope="scope" class="slot"> <el-row> <el-col :span="12"> <el-button type="text" size="small">编辑</el-button></el-col> <el-col :span="12"> <el-dropdown> <el-button style="color:#1890ff;border: none" size="small"> 更多<i class="el-icon-arrow-down el-icon--right"></i> </el-button> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>关闭</el-dropdown-item> <el-dropdown-item>删除</el-dropdown-item> <el-dropdown-item>作废</el-dropdown-item> <el-dropdown-item>打印</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </el-col> </el-row> </template>为什么高度没有显示完整

这段代码没有明确指定容器的高度，所以容器的高度是由其内部的内容撑开的。如果内容过多，高度就会超出容器的限制，导致显示不完整。可以通过给 el-row 或 el-col 组件设置固定的高度或者使用 CSS 的 overflow 属性来控制容器的高度和内容的显示方式。例如，可以给 el-row 组件添加一个 class，然后通过 CSS 来设置其高度和 overflow 属性，如下所示：

.slot {
  height: 40px;
  overflow: hidden;
}

这样就能够限制容器的高度，并且超出部分会被隐藏。如果需要显示滚动条，可以将 overflow 属性设置为 auto 或 scroll。