Element-UI 使用el-row 分栏布局的教程


Posted in Javascript onOctober 26, 2020

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

Element-UI 使用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>

应该效果如下图:

Element-UI 使用el-row 分栏布局的教程

但是我在参考例子后,代码如下:

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/>'
})

可是效果如下:

Element-UI 使用el-row 分栏布局的教程

奇怪了,为何布局变成了纵向,明明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 分栏布局的教程

我看了一下文档,发现并没有特别指出这一行的配置,可能是我遗漏了或者其他的原因导致的,也有可能是官网没有标识出这一点。总之加上了这一行配置解决了我的问题。在这里做一个笔记,也希望能够帮助到遇到类似的问题的同学。

以上这篇Element-UI 使用el-row 分栏布局的教程就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 效率组装字符串 StringBuffer
Dec 23 Javascript
使用jquery动态加载js文件的方法
Dec 24 Javascript
js Calender控件使用详解
Jan 05 Javascript
jQuery实现360°全景拖动展示
Mar 18 Javascript
js判断日期时间有效性的方法
Oct 24 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
Jul 02 Javascript
vue2中filter()的实现代码
Jul 09 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
Jan 04 Javascript
Vue常用的几个指令附完整案例
Nov 06 Javascript
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 Javascript
Vue自定义属性实例分析
Feb 23 Javascript
解决layui动态添加的元素click等事件触发不了的问题
Sep 20 Javascript
解决vue项目运行npm run serve报错的问题
Oct 26 #Javascript
js实现简易拖拽的示例
Oct 26 #Javascript
js实现限定范围拖拽的示例
Oct 26 #Javascript
js实现磁性吸附的示例
Oct 26 #Javascript
如何构建一个Vue插件并生成npm包
Oct 26 #Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
Oct 26 #Javascript
vue实现前端列表多条件筛选
Oct 26 #Javascript
You might like
JAVA/JSP学习系列之七
2006/10/09 PHP
用PHP查询域名状态whois的类
2006/11/25 PHP
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
php HtmlReplace输入过滤安全函数
2010/07/03 PHP
PHP中使用cURL实现Get和Post请求的方法
2013/03/13 PHP
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
在WordPress中获取数据库字段内容和添加主题设置菜单
2016/01/11 PHP
jQuery开发者都需要知道的5个小技巧
2010/01/08 Javascript
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
2010/03/18 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
js实现翻页后保持checkbox选中状态的实现方法
2012/11/03 Javascript
使用Post提交时须将空格转换成加号的解释
2013/01/14 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
Jquery实现纵向横向菜单
2016/01/24 Javascript
AngualrJS中的Directive制作一个菜单
2016/01/26 Javascript
jQuery根据表单name获取值的方法
2016/05/24 Javascript
JS控制HTML元素的显示和隐藏的两种方法
2016/09/27 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
微信小程序canvas写字板效果及实例
2017/06/15 Javascript
基于BootStrap实现简洁注册界面
2017/07/20 Javascript
Vue中对比scoped css和css module的区别
2018/05/17 Javascript
JS实现区分中英文并统计字符个数的方法示例
2018/06/09 Javascript
js中的闭包实例展示
2018/11/01 Javascript
微信小程序时间标签和时间范围的联动效果
2019/02/15 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
初步理解Python进程的信号通讯
2015/04/09 Python
Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
2018/05/24 Python
python中提高pip install速度
2020/02/14 Python
生日派对邀请函
2014/01/13 职场文书
高三语文教学反思
2014/01/15 职场文书
优秀教师获奖感言
2014/01/31 职场文书
怎么写好自荐书
2014/03/02 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
初中体育教学随笔
2015/08/15 职场文书
2016年社区“我们的节日·中秋节”活动总结
2016/04/05 职场文书