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 相关文章推荐
javascript显示选择目录对话框的代码
Nov 10 Javascript
Javascript 模式实例 观察者模式
Oct 24 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
Feb 07 Javascript
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
Oct 09 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
Dec 17 Javascript
深入浅析JS Function()构造函数
Aug 22 Javascript
javascript 取小数点后几位几种方法总结
Aug 02 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
Mar 07 Javascript
Webpack 4.x搭建react开发环境的方法步骤
Aug 15 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
Nov 15 Javascript
微信小程序使用字体图标的方法
May 23 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
一个PHP操作Access类(PHP+ODBC+Access)
2007/01/02 PHP
php中使用addslashes函数报错问题的解决方法
2013/02/06 PHP
php的$_FILES的临时储存文件与回收机制实测过程
2013/07/12 PHP
php版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
php的memcache类分享(memcache队列)
2014/03/26 PHP
PHP获取服务器端信息的方法
2014/11/28 PHP
PHP生成制作验证码的简单实例
2016/06/12 PHP
PHP+JavaScript实现无刷新上传图片
2017/02/21 PHP
Yii框架操作cookie与session的方法实例详解
2019/09/04 PHP
用document.documentElement取代document.body的原因分析
2009/11/12 Javascript
关于JavaScript中原型继承中的一点思考
2012/07/25 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
javascript实现类似超链接的效果
2014/12/26 Javascript
浅谈JavaScript Math和Number对象
2015/01/26 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
JavaScript中匿名函数的用法及优缺点详解
2016/06/01 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
2019/05/07 Javascript
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
Python实现的选择排序算法原理与用法实例分析
2017/11/22 Python
Python3实现发送QQ邮件功能(附件)
2020/12/23 Python
Python实现的读写json文件功能示例
2018/06/05 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
解决pytorch报错:AssertionError: Invalid device id的问题
2020/01/10 Python
python filecmp.dircmp实现递归比对两个目录的方法
2020/05/22 Python
matplotlib相关系统目录获取方式小结
2021/02/03 Python
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
师范毕业生求职自荐信
2013/09/25 职场文书
优秀的计算机专业求职信范文
2013/12/27 职场文书
书香校园活动方案
2014/02/28 职场文书
光棍节联谊晚会活动策划书
2014/10/10 职场文书
Redis高级数据类型Hyperloglog、Bitmap的使用
2021/05/24 Redis
MySQL 不等于的三种使用及区别
2021/06/03 MySQL
Python几种酷炫的进度条的方式
2022/04/11 Python