Element-UI如何使用el-row分栏布局-创新互联

今天就跟大家聊聊有关Element-UI 如何使用el-row 分栏布局，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

10年积累的做网站、网站建设经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计制作后付款的网站建设流程，更有四川免费网站建设让你可以放心的选择与我们合作。

使用多个卡片显示的时候，并且要求当列数到一定数目的时候，要自动换行，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"  align="middle" onclick="">
    <div class="el-card__body mid">
     <el-button icon="el-icon-circle-plus" circle></el-button>
     <el-button  type="text">添加APP</el-button>
    </div>
   </el-card>
  </el-col>
 </el-row>
</template>
<script>

本文题目：Element-UI如何使用el-row分栏布局-创新互联
文章链接：https://www.cdcxhl.com/article0/espoo.html

成都网站建设公司_创新互联，为您提供品牌网站制作、网站内链、手机网站建设、营销型网站建设、虚拟主机、网站营销

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联