使用多个卡片显示的时候,并且要求当列数到一定数目的时候,要自动换行,el-container 布局就满足了需求了,就要用到el-row 布局做分栏处理,
代码如下
<template>
<el-row :gutter="20" class="el-row" type="flex" >
<el-col :span="8" v-for = "(item,index) in apps" :key="" class="el-col" >
<el-card class="el-card" :key="index" onclick="">
<div slot="header" class="clearfix">
<span>{{}}</span>
</div>
<div >
<div class="text item">
<div class="item_tag" >
<span >用户标签:</span>
</div>
<div class="item_desr">
<span > {{}}</span>
</div>
</div>
<div class="text item">
<div class="item_tag">
<span>搜索标签:</span>
</div>
<div class="item_desr">
{{}}
</div>
</div>
<div class="text item">
<div class="item_tag">
<span>短信签名:</span>
</div>
<div class="item_desr">
<span>
{{}}
</span>
</div>
</div>
<div class="text item">
<div class="item_tag">
<span>客服QQ:</span>
</div>
<div class="item_desr">
{{}}
</div>
</div>
<div class="text item">
<div class="item_tag">
<span>商务合作:</span>
</div>
<div class="item_desr">
{{}}
</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="8">
<el-card class="box-card" style="min-height: 200px;" align="middle" onclick="">
<div class="el-card__body mid">
<el-button icon="el-icon-circle-plus" circle></el-button>
<el-button style="margin-left: 0;color: #505458" type="text">添加APP</el-button>
</div>
</el-card>
</el-col>
</el-row>
</template>
<script>
css
<style type="text/css">
.all{
margin-top: -30px;
word-break: break-all;
height: 100%;
}
.mid{
margin-top: 25%;
height: 50%;
}
.mid_item{
justify-content: center;
align-items: center;
}
.item {
margin-bottom: 10px;
}
.item_tag{
float:left;
text-align:left;
}
.item_desr{
margin-left: 40%;
min-height: 30px;
text-align:left;
}
.text {
width: 100%;
font-size: 12px;
font-family: "Microsoft YaHei";
color: #909399;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.el-card {
min-width: 100%;
height: 100%;
margin-right: 20px;
/*transition: all .5s;*/
}
.el-card:hover{
margin-top: -5px;
}
.el-row {
margin-bottom: 20px;
display: flex;
flex-wrap: wrap
}
.el-col {
border-radius: 4px;
align-items: stretch;
margin-bottom: 40px;
}
</style>