网站首页> 前端开发> vue.js> Element-UI 使用el-row 分栏布局的教程

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

时间:2020-10-26 19:11:19 阅读:5699次 来源:互联网

使用多个卡片显示的时候,并且要求当列数到一定数目的时候,要自动换行,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>

<script>
</script>

<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 分栏布局的教程就是小编分享给大家的全部内容了。

本文地址:https://www.manongw.com/article/109.html

文章来源:转载于CSDN,转载网址为https://blog.csdn.net/kangguang/article/details/104880967

版权申明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 ezhongheng@126.com 举报,一经查实,本站将立刻删除。

相关文章
  • 本文主要介绍了详解vue 中 scoped 样式作用域的规则的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-05 08:41
  • 本文主要介绍了html+vue.js 实现漂亮分页功能可兼容IE的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-08 09:32
  • 本文主要介绍了解决Vue watch里调用方法的坑的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-08 09:11
  • 本文主要介绍了vue中使用腾讯云Im的示例的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-24 10:26
  • 本文主要介绍了解决vue watch数据的方法被调用了两次的问题的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-08 09:37
  • 本文主要介绍了vue实现动态给id赋值,点击事件获取当前点击的元素的id操作的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-10 09:19
  • 本文主要介绍了Vue 列表页带参数进详情页的操作(router-link)的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-13 16:21
  • 本文主要介绍了vue 如何从单页应用改造成多页应用的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-23 11:11
  • 本文主要介绍了vant 中van-list的用法说明的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-12 11:04
  • 本文主要介绍了vue解决跨域问题的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-10 16:52