Element-UI 使用el-row 分栏布局

本文主要是介绍Element-UI 使用el-row 分栏布局，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

Element-UI 使用el-row 分栏布局
https://blog.csdn.net/kangguang/article/details/104880967

使用多个卡片显示的时候，并且要求当列数到一定数目的时候，要自动换行，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="item.id" class="el-col" >      <el-card class="el-card"  :key="index"  onclick="">        <div slot="header" class="clearfix">          <span>{{item.appname}}</span>        </div>        <div >          <div class="text item">            <div class="item_tag" >              <span >用户标签：</span>            </div>            <div class="item_desr">              <span > {{item.tag}}</span>            </div>          </div>          <div class="text item">            <div class="item_tag">              <span>搜索标签：</span>            </div>            <div class="item_desr">              {{item.seatag}}            </div>          </div>          <div class="text item">            <div class="item_tag">              <span>短信签名：</span>            </div>            <div class="item_desr">              <span>                 {{item.wxname}}              </span>            </div>          </div>          <div class="text item">            <div class="item_tag">              <span>客服QQ：</span>            </div>            <div class="item_desr">              {{item.qq}}            </div>          </div>          <div class="text item">            <div class="item_tag">              <span>商务合作：</span>            </div>            <div class="item_desr">              {{item.buscoo}}            </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>

这篇关于Element-UI 使用el-row 分栏布局的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！