sunny123456

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
Element-UI 使用el-row 分栏布局

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

使用多个卡片显示的时候，并且要求当列数到一定数目的时候，要自动换行，el-container 布局就满足了需求了，就要用到el-row 布局做分栏处理，

代码如下

  1. <template>
  2.   <el-row :gutter="20"  class="el-row" type="flex" >
  3.     <el-col :span="8" v-for = "(item,index) in apps" :key="item.id" class="el-col" >
  4.       <el-card class="el-card"  :key="index"  onclick="">
  5.         <div slot="header" class="clearfix">
  6.           <span>{{item.appname}}</span>
  7.         </div>
  8.         <div >
  9.           <div class="text item">
  10.             <div class="item_tag" >
  11.               <span >用户标签：</span>
  12.             </div>
  13.             <div class="item_desr">
  14.               <span > {{item.tag}}</span>
  15.             </div>
  16.           </div>
  17.           <div class="text item">
  18.             <div class="item_tag">
  19.               <span>搜索标签：</span>
  20.             </div>
  21.             <div class="item_desr">
  22.               {{item.seatag}}
  23.             </div>
  24.           </div>
  25.           <div class="text item">
  26.             <div class="item_tag">
  27.               <span>短信签名：</span>
  28.             </div>
  29.             <div class="item_desr">
  30.               <span>
  31.                  {{item.wxname}}
  32.               </span>
  33.             </div>
  34.           </div>
  35.           <div class="text item">
  36.             <div class="item_tag">
  37.               <span>客服QQ：</span>
  38.             </div>
  39.             <div class="item_desr">
  40.               {{item.qq}}
  41.             </div>
  42.           </div>
  43.           <div class="text item">
  44.             <div class="item_tag">
  45.               <span>商务合作：</span>
  46.             </div>
  47.             <div class="item_desr">
  48.               {{item.buscoo}}
  49.             </div>
  50.           </div>
  51.         </div>
  52.       </el-card>
  53.     </el-col>
  54.     <el-col :span="8">
  55.       <el-card class="box-card" style="min-height: 200px;" align="middle" onclick="">
  56.         <div class="el-card__body mid">
  57.           <el-button  icon="el-icon-circle-plus" circle></el-button>
  58.           <el-button style="margin-left: 0;color: #505458" type="text">添加APP</el-button>
  59.         </div>
  60.       </el-card>
  61.     </el-col>
  62.   </el-row>
  63. </template>
  64. <script>

css

  1. <style type="text/css">
  2.   .all{
  3.     margin-top: -30px;
  4.     word-break: break-all;
  5.     height: 100%;
  6.   }
  7.   .mid{
  8.     margin-top: 25%;
  9.     height: 50%;
  10.   }
  11.   .mid_item{
  12.     justify-content: center;
  13.     align-items: center;
  14.   }
  15.   .item {
  16.     margin-bottom: 10px;
  17.   }
  18.   .item_tag{
  19.     float:left;
  20.     text-align:left;
  21.   }
  22.   .item_desr{
  23.     margin-left: 40%;
  24.     min-height: 30px;
  25.     text-align:left;
  26.   }
  27.   .text {
  28.     width: 100%;
  29.     font-size: 12px;
  30.     font-family: "Microsoft YaHei";
  31.     color: #909399;
  32.   }
  33.   .clearfix:before,
  34.   .clearfix:after {
  35.     display: table;
  36.     content: "";
  37.   }
  38.   .clearfix:after {
  39.     clear: both
  40.   }
  41.  
  42.   .el-card {
  43.     min-width: 100%;
  44.     height: 100%;
  45.     margin-right: 20px;
  46.     /*transition: all .5s;*/
  47.   }
  48.   .el-card:hover{
  49.     margin-top: -5px;
  50.   }
  51.   .el-row {
  52.     margin-bottom: 20px;
  53.     display: flex;
  54.     flex-wrap: wrap
  55.   }
  56.   .el-col {
  57.     border-radius: 4px;
  58.     align-items: stretch;
  59.     margin-bottom: 40px;
  60.   }
  61. </style>

 

posted on 2022-06-08 22:38  sunny123456  阅读(1384)  评论(0)  编辑  收藏  举报