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 相关文章推荐
文本框的字数限制功能jquery插件
Nov 24 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
Dec 02 Javascript
在Javascript中处理字符串之big()方法的使用
Jun 08 Javascript
动态创建按钮的JavaScript代码
Jan 29 Javascript
jQuery获取radio选中项的值实例
Jun 18 Javascript
JavaScript reduce和reduceRight详解
Oct 24 Javascript
ajax接收后台数据在html页面显示
Feb 19 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
Apr 01 Javascript
vue mounted组件的使用
Jun 18 Javascript
原生JS实现简单的无缝自动轮播效果
Sep 26 Javascript
vue.config.js常用配置详解
Nov 14 Javascript
基于Vue实现微前端的示例代码
Apr 24 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与MySQL开发中页面乱码的产生与解决
2008/03/27 PHP
php中in_array函数用法探究
2014/11/25 PHP
php中strlen和mb_strlen用法实例分析
2016/11/12 PHP
JQuery UI皮肤定制
2009/07/27 Javascript
jquery ajax同步异步的执行最终解决方案
2013/04/26 Javascript
JavaScript学习笔记之Function对象
2015/01/22 Javascript
JS基于Ajax实现的网页Loading效果代码
2015/10/27 Javascript
AngularJS入门教程之AngularJS表达式
2016/04/18 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
2017/10/26 Javascript
深入解析ES6中的promise
2018/11/08 Javascript
详解NodeJs项目 CentOs linux服务器线上部署
2019/09/16 NodeJs
[34:41]夜魇凡尔赛茶话会 第二期02:你画我猜
2021/03/11 DOTA
Python实现SVN的目录周期性备份实例
2015/07/17 Python
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
git进行版本控制心得详谈
2017/12/10 Python
python识别图像并提取文字的实现方法
2019/06/28 Python
django-allauth入门学习和使用详解
2019/07/03 Python
python中append实例用法总结
2019/07/30 Python
Python *args和**kwargs用法实例解析
2020/03/02 Python
Python3 pickle对象串行化代码实例解析
2020/03/23 Python
使用python计算三角形的斜边例子
2020/04/15 Python
Python中使用filter过滤列表的一个小技巧分享
2020/05/02 Python
python switch 实现多分支选择功能
2020/12/21 Python
华润集团网上药店:健一网
2016/09/19 全球购物
管理站站长岗位职责
2013/11/27 职场文书
优秀毕业生求职信范文
2014/01/02 职场文书
一岗双责责任书
2014/04/15 职场文书
青年安全生产示范岗事迹材料
2014/05/04 职场文书
初中升旗仪式演讲稿
2014/05/08 职场文书
环保倡议书50字
2014/05/15 职场文书
2014客服代表实习自我鉴定
2014/09/18 职场文书
2014矛盾纠纷排查调处工作总结
2014/12/09 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书
使用redis实现延迟通知功能(Redis过期键通知)
2021/09/04 Redis