这篇文章主要介绍了Element-UI 使用el-row 分栏布局的教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
使用多个卡片显示的时候，并且要求当列数到一定数目的时候，要自动换行，el-container 布局就满足了需求了，就要用到el-row 布局做分栏处理，
代码如下
用户标签： {{item.tag}} 搜索标签： {{item.seatag}} 短信签名： {{item.wxname}} 客服QQ： {{item.qq}} 商务合作： {{item.buscoo}} 添加APP
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; }
补充知识：vue element框架中el-row控件里按列排列失效问题的解决
最近我在使用vue的ui框架element-ui，可能是自己经验不足，遇到了很奇怪的问题，在这里特意把解决的步骤记录一下，希望能对大家有所帮助。
首先我使用的分栏间隔的布局方式，参照官网上的例子：
.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; }
应该效果如下图：
但是我在参考例子后，代码如下：
App.vue
1 1 1 1
.el-row { margin-bottom: 20px; } .el-col { border-radius: 14px; } .bg-purple { background: #d3dce6; } .grid-content { border-radius: 14px; min-height: 36px; }
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: '' })
可是效果如下：
奇怪了，为何布局变成了纵向，明明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: '' })
这个时候效果如下，应该是我们希望看到的，至少列生效了：
我看了一下文档，发现并没有特别指出这一行的配置，可能是我遗漏了或者其他的原因导致的，也有可能是官网没有标识出这一点。总之加上了这一行配置解决了我的问题。在这里做一个笔记，也希望能够帮助到遇到类似的问题的同学。
以上这篇Element-UI 使用el-row 分栏布局的教程就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持本站。
您可能感兴趣的文章:
- 基于elementUI竖向表格、和并列的案例
- vue修改Element的el-table样式的4种方法
- Vue中正确使用Element-UI组件的方法实例
以上就是Element-UI 使用el-row 分栏布局的教程的详细内容，更多请关注本站其它相关文章！
