Element-UI 使用el-row 分欄佈局的教學

2020-10-26 18:00:31

使用多個卡片顯示的時候，並且要求當列數到一定數目的時候，要自動換行，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>

補充知識：vue element框架中el-row控制元件裡按列排列失效問題的解決

最近我在使用vue的ui框架element-ui，可能是自己經驗不足，遇到了很奇怪的問題，在這裡特意把解決的步驟記錄一下，希望能對大家有所幫助。

首先我使用的分欄間隔的佈局方式，參照官網上的例子：

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

<style>
 .el-row {
 margin-bottom: 20px;
 &:last-child {
  margin-bottom: 0;
 }
 }
 .el-col {
 border-radius: 4px;
 }
 .bg-purple-dark {
 background: #99a9bf;
 }
 .bg-purple {
 background: #d3dce6;
 }
 .bg-purple-light {
 background: #e5e9f2;
 }
 .grid-content {
 border-radius: 4px;
 min-height: 36px;
 }
 .row-bg {
 padding: 10px 0;
 background-color: #f9fafc;
 }
</style>

應該效果如下圖：

但是我在參考例子後，程式碼如下：

App.vue

<template>
 <div id="app">
<el-row :gutter="20">
 <el-col :span="6"><div class="grid-content bg-purple">1</div></el-col>
 <el-col :span="6"><div class="grid-content bg-purple">1</div></el-col>
 <el-col :span="6"><div class="grid-content bg-purple">1</div></el-col>
 <el-col :span="6"><div class="grid-content bg-purple">1</div></el-col>
</el-row>
</div>
</template>

<style>
 .el-row {
 margin-bottom: 20px;
 }
 .el-col {
 border-radius: 14px;
 }
 .bg-purple {
 background: #d3dce6;
 }
 .grid-content {
 border-radius: 14px;
 min-height: 36px;
 }
</style>

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'//A Vue.js 2.0 UI Toolkit for Web
Vue.use(ElementUI);

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>'
})

可是效果如下：

奇怪了，為何佈局變成了縱向，明明row中的佈局應該是按列排列的。經過排查發現自己少了這一行：import ‘element-theme-chalk';

也就是程式碼應該如下：

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'//A Vue.js 2.0 UI Toolkit for Web
import 'element-theme-chalk';
Vue.use(ElementUI);

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>'
})

這個時候效果如下，應該是我們希望看到的，至少列生效了：

我看了一下檔案，發現並沒有特別指出這一行的設定，可能是我遺漏了或者其他的原因導致的，也有可能是官網沒有標識出這一點。總之加上了這一行設定解決了我的問題。在這裡做一個筆記，也希望能夠幫助到遇到類似的問題的同學。

以上這篇Element-UI 使用el-row 分欄佈局的教學就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援it145.com。

Element-UI 使用el-row 分欄佈局的教學

熱門文章