<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> 让他每行居左开始
时间: 2024-01-03 14:38:19 浏览: 33
要让el-col每行居左开始,您可以使用flex布局的`justify-content`属性来实现。将`justify-content`设置为`flex-start`,即可使每行元素左对齐。
以下是修改后的代码示例:
```vue
<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;`样式,使得每行的元素居左开始对齐。
希望这个修正能够满足您的需求。如果还有其他问题,请随时提出。
相关问题
<el-row> <el-col :span="12"> </el-col> <el-col :span="12"> </el-col> </el-row>怎么再将el-col分成1:2的两部分
你可以在每个 `el-col` 中再嵌套一个 `el-row`,然后在其中分别再添加两个 `el-col`,并设置它们的 `span` 属性为6和12,代码如下:
```
<el-row>
<el-col :span="12">
<el-row>
<el-col :span="6"></el-col>
<el-col :span="6"></el-col>
</el-row>
</el-col>
<el-col :span="12">
<el-row>
<el-col :span="6"></el-col>
<el-col :span="6"></el-col>
</el-row>
</el-col>
</el-row>
```
这样,每个 `el-col` 就被分成了两个宽度比例为1:2的部分。
<el-col :span="5"> <el-card style="color:#409EFF"> <div style="color:#409EFF"><i class="el-icon-s-shop"/>能力发布驳回数</div> <div style="padding:10px 0;text-align:center;font-weight:bold">100</div> </el-card> </el-col> <el-col :span="5"> <el-card style="color:#409EFF"> <div style="color:#409EFF"><i class="el-icon-s-shop"/>人工告警数量</div> <div style="padding:10px 0;text-align:center;font-weight:bold">100</div> </el-card> </el-col> <el-col :span="5"> <el-card style="color:#409EFF"> <div style="color:#409EFF"><i class="el-icon-s-shop"/>自动告警数量</div> <div style="padding:10px 0;text-align:center;font-weight:bold">100</div> </el-card> </el-col> <el-col :span="5"> <el-card style="color:#409EFF"> <div style="color:#409EFF"><i class="el-icon-s-shop"/>钉钉告警数量</div> <div style="padding:10px 0;text-align:center;font-weight:bold">100</div> </el-card> </el-col> <el-col :span="5"> <el-card style="color:#409EFF"> <div style="color:#409EFF"><i class="el-icon-s-shop"/>BOMC告警数量</div> <div style="padding:10px 0;text-align:center;font-weight:bold">100</div> </el-card> </el-col> </el-row>如何让这五个卡片大小统一展示在一条线上
你可以尝试在每个 `<el-col>` 元素中添加 `align="center"` 属性,同时在最外层的 `<el-row>` 元素中添加 `justify="center"` 属性,代码如下:
```
<el-row justify="center">
<el-col :span="5" align="center">
<el-card style="color:#409EFF">
<div style="color:#409EFF"><i class="el-icon-s-shop"/>能力发布驳回数</div>
<div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
</el-card>
</el-col>
<el-col :span="5" align="center">
<el-card style="color:#409EFF">
<div style="color:#409EFF"><i class="el-icon-s-shop"/>人工告警数量</div>
<div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
</el-card>
</el-col>
<el-col :span="5" align="center">
<el-card style="color:#409EFF">
<div style="color:#409EFF"><i class="el-icon-s-shop"/>自动告警数量</div>
<div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
</el-card>
</el-col>
<el-col :span="5" align="center">
<el-card style="color:#409EFF">
<div style="color:#409EFF"><i class="el-icon-s-shop"/>钉钉告警数量</div>
<div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
</el-card>
</el-col>
<el-col :span="5" align="center">
<el-card style="color:#409EFF">
<div style="color:#409EFF"><i class="el-icon-s-shop"/>BOMC告警数量</div>
<div style="padding:10px 0;text-align:center;font-weight:bold">100</div>
</el-card>
</el-col>
</el-row>
```
这样设置后,每个卡片的宽度会被限定在 `<el-col>` 元素的宽度内,同时 `<el-row>` 元素的 `justify` 属性可以让所有的元素在水平方向上居中对齐。