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工具 Cookie 封装
Aug 21 Javascript
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
Apr 25 Javascript
给js文件传参数(详解)
Jul 13 Javascript
jQuery元素的隐藏与显示实例
Jan 20 Javascript
对JavaScript中this指针的新理解分享
Jan 31 Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 Javascript
用jmSlip编写移动端顶部日历选择控件
Oct 24 Javascript
Vue基于NUXT的SSR详解
Oct 24 Javascript
react实现一个优雅的图片占位模块组件详解
Oct 30 Javascript
解决VUEX兼容IE上的报错问题
Mar 01 Javascript
layUI实现三级导航菜单效果
Jul 26 Javascript
layui实现下拉框三级联动
Jul 26 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中mt_rand()随机数函数用法
2014/11/24 PHP
php中__toString()方法用法示例
2016/12/07 PHP
jQuery瀑布流插件Wookmark使用实例
2014/04/02 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
2015/03/27 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
JQuery ztree带筛选、异步加载实例讲解
2016/02/25 Javascript
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
weex里Vuex state使用storage持久化详解
2017/09/09 Javascript
JS实现图片居中悬浮效果
2017/12/25 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
js针对图片加载失败的处理方法分析
2019/08/24 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
vue打开其他项目页面并传入数据详解
2020/11/25 Vue.js
[01:45]绝对公平!DOTA2队长征召模式详解
2014/04/25 DOTA
python中的编码知识整理汇总
2016/01/26 Python
Python自定义类的数组排序实现代码
2016/08/28 Python
windows10系统中安装python3.x+scrapy教程
2016/11/08 Python
Python字典数据对象拆分的简单实现方法
2017/12/05 Python
windows 下python+numpy安装实用教程
2017/12/23 Python
python logging日志模块以及多进程日志详解
2018/04/18 Python
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
在Python 中同一个类两个函数间变量的调用方法
2019/01/31 Python
python 递归调用返回None的问题及解决方法
2020/03/16 Python
canvas烟花特效锦集
2018/01/17 HTML / CSS
土耳其国际性时尚购物网站:Modanisa
2018/01/19 全球购物
乌克兰时尚鞋子和衣服购物网站:Born2be
2018/05/24 全球购物
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
澳大利亚在线家具店:Luxo Living
2019/03/24 全球购物
Hammitt官网:设计师手袋
2020/05/23 全球购物
下列程序在32位linux或unix中的结果是什么
2014/03/25 面试题
sort命令的作用和用法
2013/08/25 面试题
开业庆典致辞
2015/08/01 职场文书
2015年小学师德师风建设工作总结
2015/10/23 职场文书
详解python网络进程
2021/06/15 Python