溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關Element-UI 如何使用el-row 分欄布局，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
使用多個卡片顯示的時候，并且要求當列數到一定數目的時候，要自動換行，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>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>
<script>
</script>
<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 分欄布局有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
