vue vueelementui组件 <elrow> <elcol>

首先你要掌握的基础知识:

row 行概念

1	<el-row></el-row>

col 列概念

1	<el-col></el-col>

col组件的:span属性的布局调整,一共分为24栏:

代码示例:

1 <el-row>
2   <el-col :span="24"><div class="grid-content"></div></el-col>
3 </el-row> 

效果展示:

 代码示例：

1 <el-row>
2   <el-col :span="12"><div class="grid-content"></div></el-col>
3 </el-row>

效果展示:

 row组件的:gutter属性来调整布局之间的宽度---分栏间隔

代码示例:

1 <el-row :gutter="20">
2   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
3   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
4 </el-row>

效果:

 

 Col组件的:offset属性调整方块的偏移位置（每次1格/24格）

1 <el-row :gutter="20">
2   <el-col :span="6" :offset="6"><div class="grid-content"></div></el-col>
3   <el-col :span="6" :offset="6"><div class="grid-content"></div></el-col>
4 </el-row>

效果:

对齐方式:

row组件的type="flex"启动flex布局，再通过row组件的justify属性调整排版方式，属性值分别有:

1. justify=center 居中对齐
2. justify=start 左对齐
3. justify=end 右对齐
4. justify=space-between 空格间距在中间对齐
5. justify=space-around 左右各占半格空格对齐

1 <el-row type="flex" class="row-bg" justify="center">
2    <el-col :span="6"><div class="grid-content"></div></el-col>
3  </el-row>

效果:

 响应式布局:

参考bootstrap的响应式，预设四个尺寸

1. xs <768px
2. sm ≥768px
3. md ≥992
4. lg ≥120

使用方式:

1 <el-row :gutter="10">
2   <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple"></div></el-col>
3   <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple-light"></div></el-col>
4   <el-col :xs="4" :sm="6" :md="8" :lg="9"><div class="grid-content bg-purple"></div></el-col>
5   <el-col :xs="8" :sm="6" :md="4" :lg="3"><div class="grid-content bg-purple-light"></div></el-col>
6 </el-row>

练习示例:

1         <span class="field-label">方块选择:</span>
2         <!-- 选择屏幕框 -->
3           <select v-model="selected" @change="selectbj(selected)">
4             <option v-for="option in layouts" :value="option.value">
5                 {{ option.name }}
6             </option>
7           </select>

data默认初始化数据:

1       selected: 0,
2       layouts: [
3         { 'name': '1x1模式', 'value': '0' },
4         { 'name': '2x1模式', 'value': '1' },
5         { 'name': '2x2模式', 'value': '2' },
6         { 'name': '3x2模式', 'value': '3' },
7         { 'name': '3x3模式', 'value': '4' },
8         { 'name': '1+5模式', 'value': '5' }
9       ],

布局代码:

    <el-main v-model="selected" >
      <div class="block" style="height:400px">
            <!-- {{selected}} -->
            <div style="height:100%;100%" v-if="selected==0">
            <!-- 1*1布局 -->
                <el-row :gutter="10" type="flex" class="grid-one-contentheight" justify="center">
                  <el-col :span="24"></el-col>
                </el-row>
            </div>
            <!-- 2*1布局 -->
            <div style="height:100%;100%" v-else-if="selected==1">
                <el-row :gutter="10" type="flex" class="row-bg el-row-two" justify="space-between">
                  <el-col :span="12"><div class="grid-content "></div></el-col>
                  <el-col :span="12"><div class="grid-content "></div></el-col>
                </el-row>
            </div>
            <!-- 2*2 -->
            <div style="height:100%;100%" v-else-if="selected==2">
              <el-row :gutter="10" type="flex" class="row-bg" justify="center">
                  <el-col :span="12"><div class="grid-content "></div></el-col>
                  <el-col :span="12"><div class="grid-content "></div></el-col>
                </el-row>
                <br>
                <el-row :gutter="10" type="flex" class="row-bg" justify="center">
                  <el-col :span="12"><div class="grid-content "></div></el-col>
                  <el-col :span="12"><div class="grid-content "></div></el-col>
                </el-row>
            </div>
            <!-- 3*2布局 -->
            <div style="height:100%;100%" v-else-if="selected==3">
              <el-row :gutter="10" type="flex" class="row-bg" justify="center">
                  <el-col :span="12"><div class="grid-content "></div></el-col>
                  <el-col :span="12"><div class="grid-content "></div></el-col>
                  <el-col :span="12"><div class="grid-content "></div></el-col>
                </el-row>
                <br>
                <el-row :gutter="10" type="flex" class="row-bg" justify="center">
                  <el-col :span="12"><div class="grid-content "></div></el-col>
                  <el-col :span="12"><div class="grid-content "></div></el-col>
                  <el-col :span="12"><div class="grid-content "></div></el-col>
                </el-row>
            </div>
            <!-- 3*3模式 -->
            <div style="height:100%;100%" v-else-if="selected==4">
                <el-row :gutter="10" type="flex" class="row-bg" justify="center">
                  <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                  <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                  <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                </el-row>
                <br>
                <el-row :gutter="10" type="flex" class="row-bg" justify="center">
                  <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                  <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                  <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                </el-row>
                <br>
                <el-row :gutter="10" type="flex" class="row-bg" justify="center">
                  <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                  <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                  <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                </el-row>
            </div>
            <!-- 模式 -->
            <div style="height:100%;100%" v-else>
               <el-row :gutter="10" type="flex" class="row-bg" justify="start">
                  <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                  <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                  <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                </el-row>
                <br>
                <el-row :gutter="10" type="flex" class="row-bg" justify="start">
                    <el-col :span="8">
                      <div class="grid-a-contentWidth"></div>
                      <br>
                      <div class="grid-a-contentWidth"></div>
                      </el-col>
                    <el-col :span="16"><div class="grid-a-content-a-Width" ></div></el-col>
                </el-row>  
            </div>
          </div>
    </el-main>

样式(从里面对应取一下):

  1 <style scoped>
  2   .box-card{
  3      400px;
  4     margin: 20px auto;
  5   }
  6   .block{
  7     padding: 30px 24px;
  8      color: rgb(128, 0, 128);">27, 16, 16);
  9   }
 10   .alert-item{
 11     margin-bottom: 10px;
 12   }
 13   .tag-item{
 14     margin-right: 15px;
 15   }
 16   .link-title{
 17     margin-left:35px;
 18   }
 19   .components-container {
 20         position: relative;
 21         height: 100vh;
 22     }
 23  
 24     .left-container {
 25         background-color: #F38181;
 26         height: 100%;
 27     }
 28  
 29     .right-container {
 30         background-color: #FCE38A;
 31         height: 200px;
 32     }
 33  
 34     .top-container {
 35         background-color: #FCE38A;
 36          100%;
 37         height: 100%;
 38     }
 39  
 40     .bottom-container {
 41          100%;
 42         background-color: #95E1D3;
 43         height: 100%;
 44     }
 45  
 46   .left-container-twoOne {
 47          color: rgb(128, 0, 128);">110, 75, 75);
 48     height: 100%;
 49   }
 50  
 51   .container-onetoOne {
 52        color: rgb(128, 0, 128);">47, 80, 74);
 53       height: 100%;
 54        50%;
 55   }
 56  
 57   .container-onetoTwo {
 58        color: rgb(128, 0, 128);">61, 19, 56);
 59       height: 100%;
 60        50%;
 61   }
 62  
 63   .el-col {
 64     border-radius: 4px;
 65   }
 66   .bg-purple-dark {
 67     background: #57926b;
 68   }
 69   .bg-purple {
 70     background: #7e2970;
 71   }
 72   .bg-purple-light {
 73     background: #071c4d;
 74   }
 75   .grid-content {
 76      color: rgb(128, 0, 128);">44, 143, 121);
 77     border-radius: 4px;
 78     min-height: 150px;
 79     min- 100px;
 80   }
 81   .grid-contentB {
 82      color: rgb(128, 0, 128);">64, 56, 134);
 83     border-radius: 4px;
 84     min-height: 150px;
 85     min- 100px;
 86   }
 87   .grid-a-contentWidth {    
 88      color: rgb(128, 0, 128);">44, 143, 121);
 89     border-radius: 4px;
 90     min-height: 100px;
 91   }
 92   .grid-a-content-a-Width {    
 93      color: rgb(128, 0, 128);">44, 143, 121);
 94     border-radius: 4px;
 95     min-height: 220px;
 96   }
 97  
 98   .grid-one-contentheight {    
 99      color: rgb(128, 0, 128);">44, 143, 121);
100     border-radius: 4px;
101     min-height: 100%;
102   }
103  
104 .el-row-two {
105     margin-bottom: 80px;
106     margin-top: 80px;
107   
108   }
109 </style>

效果:

 侵删，原文链接：https://blog.csdn.net/jack_bob/article/details/79813114