精华内容
下载资源
问答
  • el-row
    2022-01-18 10:10:18

     

    https://blog.csdn.net/acoolgiser/article/details/105891189

    更多相关内容
  • 使用多个卡片显示的时候,并且要求当列数到一定数目的时候,要自动换行,el-container 布局就满足了需求了,就要用到el-row 布局做分栏处理, 代码如下 <el gutter=20 class=el-row type=flex> <el span=8 xss=...
  • Element-Plus el-col、el-row快速布局

    千次阅读 2022-05-10 18:54:01
    一篇博客学会el-col布局工具的使用


    前言

    拖拉了一晚, 总结了一些Layout布局工具的使用方法.


    一、el-col

    本来打算先说row的… 写完看了一遍感觉还是换过来的好(捂脸).
    el-col是el-row的子元素.

    在el-row添加

    style="flex-direction: column;" 
    

    可以实现纵向排列el-col, 在需要纵向布局时可以使用, 横向col现在填满默认自动换行, 不需要特别规定;

    span

    规定一个col占据24份中的多少份.
    倒也不是必加的属性…
    当el-row中仅有一个el-col时, 该el-col默认占据全部的24份, 填满el-row.
    但是如果多个el-col情况下不加, 效果会比较糟糕, 第一个el-col依旧占据第一行的全部24份, 但是其他el-col会被挤到换行(倒也不会挤出el-row), 就像这样:
    黄, 蓝, 绿, 分别为第一二三个el-col, 都不传span值.
    在这里插入图片描述

      <el-row class="dark">
        <el-col class="yellow">
          <sy-author-1></sy-author-1>
        </el-col>
        <!-- 分隔 -->
        <el-col class="blue">
          <div></div>
        </el-col>
        <!-- 分隔 -->
        <el-col class="green" >
          <div></div>
        </el-col>
      </el-row>
    
    * {
      transition: 1s;
    }
    
    .dark {
      background-color: rgb(137, 133, 133);
    }
    
    .yellow {
      background-color: rgb(176, 170, 80);
    }
    
    .green {
      background-color: rgb(85, 144, 135);
    }
    
    .blue {
      background-color: rgb(65, 115, 153);
    }
    

    就说正常加span的情况下, 页面使用el-row后, 横向距离被等量的分为24份, el-col的span属性决定的是"这个el-col在横向占据24分之几个el-row".
    在这里插入图片描述
    比如这次span分别是8、5、8, 那么剩下3份空间没用上, 也就是右边的灰色部分, 暴露出el-row的颜色.

    push & pull

    pull和push控制col的横向位移, 以份为单位 最大值24超出无效.
    push和pull不会影响“横向被分为24份”这个规则, 比如第一个el-col被:push=“1”, 最后一个el-col被:pull=“1”, 中间的三个el-col还是可以各占8份, 只不过会有重叠的情况.

    <el-row class="dark">
      <el-col :span="8" class="yellow" :push="2"> <!-- 左边push两份 -->
        <sy-author-1></sy-author-1>
      </el-col>
        <!-- 分隔 -->
      <el-col class="blue" :span="8">
        <div></div>
      </el-col>
        <!-- 分隔 -->
      <el-col class="green" :span="8" :pull="2"> <!-- 右边pull两份 -->
        <div></div>
      </el-col>
    </el-row>
    

    虽然依旧各占8份, 但是蓝盒子被左右两侧遮盖了.
    在这里插入图片描述
    所有el-col没有发生尺寸上的变化.


    响应式

    提供一个专门的属性, 让使用者规定在该属性对应的分辨率下, col要怎样进行排列.
    响应式属性(xs, lg等)接受传入对象类型和数字类型;
    对象类型可用于规定offset和span等属性, 针对每个分辨率范围定制一套合适的样式:

    属性说明
    xs小于768
    sm大等于768
    md大等于992
    lg大等于1200
    xl大等于1920

    来写个栗子看一下, 规定小于768, 大于992, 大于1200时的排列:
    这个例子有一些缺陷, 请读完例子下面的部分.

    <el-row class="dark">
      <el-col
        :xs="{ span: 22, push: 1, pull: 1 }"
        :md="{ span: 18, push: 3 }"
        :lg="{ span: 8, push: 1 }"
        class="yellow"
      >
        <div></div>
      </el-col>
        <!-- 分隔 -->
      <el-col
        :xs="{ span: 22, pull: 1, push: 1 }"
        :md="{ span: 16, push: 2 }"
        :lg="{ span: 8, push: 0 }"
        class="blue"
      >
        <div></div>
      </el-col>
        <!-- 分隔 -->
      <el-col
        class="green"
        :xs="{ push: 1, pull: 1, span: 22 }"
        :md="{ span: 14, push: 1 }"
        :lg="{ span: 7, pull: 1, push: 0 }"
      >
        <div
        ></div>
      </el-col>
    </el-row>
    

    在这里插入图片描述

    其实写案例的时候还发现了一个问题, 响应式方案里的属性是可以继承的, 这样说倒也不准确…

    表现出来就是:
    设置了md的push, span后, 如果不设置lg的push, 那么lg方案会采用用md方案的push / pull, 而不是默认的pull / push为0, 这个问题会发生在各组方案之间, 只要有一组方案缺少属性, 它就从上一组方案里拿属性:

    <!-- 这里pull无效, 所以没写... -->
    <!-- 因为蓝色块出的问题, 所以只放个蓝色块 -->
    <el-col
      :md="{ span: 16, push: 2 }"
      :lg="{ span: 8 }"
      class="blue"
    >
      <div></div>
    </el-col>
    

    然后lg状态就变成这样了, 你可以看到蓝块左侧空出来了一块, 这就是lg方案从md偷的push:2.
    在这里插入图片描述
    这个时候再规定lg的push为0:

    <el-col
      :md="{ span: 16, push: 2 }"
      :lg="{ span: 8, push:0 }"
      class="blue"
    >
      <div></div>
    </el-col>
    

    在这里插入图片描述
    所以用响应式的时候, 规定方案要把每一项都详细规定好, 避免从其他方案继承到属性, 出现一些奇怪的效果.

    pull在响应式方案里有时会失效, 比如我们现在这个例子, 我给了第三个col一个lg状态下的pull:1, 什么效果都没有:
    在这里插入图片描述
    但是在xs方案中, pull:1生效了:
    在这里插入图片描述
    也不是因为没有多余空间可以移动的问题, 事实是有多余空间它也无效…
    没能解决这个问题.

    offset

    我把这个放在最后是因为写案例的时候出现了一点小状况, 我发现我的offset不能生效, 是那种…怎么改都不生效.
    然后一次偶然, 我把css里的:

    * {
      margin: 0;
      padding: 0;
      }
    

    删了, 然后解决了, 就挺无语的, 可能是el组件里的样式优先级比较低, 被覆盖了吧.

    好吧, 那步入正题
    offset规定col左侧的间隔份数, 它是真的能把col给挤到下一行的

    <el-row class="dark">
      <el-col
        :lg="{ span: 8, push: 0 }"
        class="yellow"
      >
        <div></div>
      </el-col>
        <!-- 分隔 -->
      <el-col
        :lg="{ span: 8, push: 0, pull: 0, offset: 9}"
        class="blue"
      >
        <div></div>
      </el-col>
        <!-- 分隔 -->
      <el-col
        class="green"
        :lg="{ span: 8, pull: 0, push: 0 }"
      >
        <div></div>
      </el-col>
    </el-row>
    

    效果:
    在这里插入图片描述
    不要offset来做换行, 用响应式或者在el-row添加

    style="flex-direction: column;" 
    

    会更好, offset达成的换行, 左侧会有空间, 就像上面动图的蓝块就是offset导致的换行, 不稳定而且难看.


    二、el-row

    “row” 中文即"排, 行"的意思, el-row组件即创建一行.
    使用后自动占据页面横向全部空间, 并且把横向空间不可见的分割为24份.
    在el-row添加

    style="flex-direction: column;" 
    

    可以实现纵向排列el-col, 在需要纵向布局时可以使用, 横向col现在填满默认自动换行, 不需要特别规定;

    gutter

    官方给的解释是"控制栅格间距", 我理解的是控制el-col之间的横向间距, 其实这有点像justify-content,写在外面控制里面.
    但是我写了一个demo来测试的时候, 发现它控制的似乎是el-col的子元素与el-col左边框的间距, 而并非el-col之间的间距.
    以下面这段代码为例, 一个el-row里装了三个el-col, 初始gutter为0.

    <el-row class="dark" :gutter="0">
    
      <el-col :span="8" class="yellow">
        <sy-author-1></sy-author-1>
      </el-col>
        <!-- 分隔 -->
      <el-col class="blue" :span="8">
        <div></div>
      </el-col>
        <!-- 分隔 -->
      <el-col class="green" :span="8">
        <div></div>
      </el-col>
    
    </el-row>
    

    在这里插入图片描述

    现在把gutter增加到80, 可以看到, el-col之间的距离始终是不变的:0, 但是除去最左边的组件, 每个el-col的子元素和它们所在el-col的左边距都增加了.

    这次增加是由el-col宽度的双向扩大和子元素向右位移共同完成的:
    在这里插入图片描述
    那么这是对于一个子元素, 如果对于多个同在一行的子元素, 全部子元素的左边距也并不会都增加:
    在这里插入图片描述
    这些子元素更像是被看作一个整体.


    justify

    el-row中所有el-col的横向对齐方式.
    但这是建立在el-row横向还有空间的前提下, 如果el-row横向24份已经塞得满满当当, 那这个属性给什么值都不会有效果的.

    属性可取值
    justifystart / end / center / space-around / space-between / space-evenly

    那还是用第一段代码举例:

    <el-row class="dark" justify="center"> <!-- 居中对齐 -->
      <el-col :span="8" class="yellow">
        <sy-author-1></sy-author-1>
      </el-col>
        <!-- 分隔 -->
      <el-col class="blue" :span="5"> <!-- 注意这里改成5了, 我们不能把el-row填满 -->
        <div></div>
        <span>哦哦哦</span>
      </el-col>
        <!-- 分隔 -->
      <el-col class="green" :span="8">
        <div></div>
      </el-col>
    </el-row>
    

    那现在可以看到现在el-col都挤到中央了, 其实这个挺像justify-content的.(弹性布局)
    他们封装的时候是不是就拿这个直接给justify-content传值的…我猜…
    在这里插入图片描述
    然后space-between情况下:
    在这里插入图片描述
    均匀分布两侧贴边.

    在el-col分多行的情况下:justify=“end”:

    <el-row class="dark" justify="end">
      <el-col
        :lg="{ span: 8, push: 0 }"
        class="yellow"
      >
        <div></div>
      </el-col>
        <!-- 分隔 -->
      <el-col
        :lg="{ span: 8, push: 0, pull: 0, offset: 9}"
        class="blue"
      >
        <div></div>
      </el-col>
        <!-- 分隔 -->
      <el-col
        class="green"
        :lg="{ span: 8, pull: 0, push: 0 }"
      >
        <div></div>
      </el-col>
    </el-row>
    

    效果:
    在这里插入图片描述

    align

    el-row中所有el-col的纵向对齐方式, 前提是纵向还有空间, 所以规定el-col的高度应该会是不错的选择, 不然纵向默认填满el-row, 这个属性就彻底失效了.
    三个可用值:

    属性可用值
    aligntop / middle / bottom

    默认是top, 这个情况下不给el-col高度, el-col也会在纵向占满el-row, 但是另外两个属性…

    align="bottom"
    

    在这里插入图片描述

    align="middle"
    

    在这里插入图片描述
    多行情况:

    <el-row class="dark" align="middle">
      <el-col
        :lg="{ span: 8, push: 0 }"
        class="yellow"
      >
        <div></div>
      </el-col>
        <!-- 分隔 -->
      <el-col
        :lg="{ span: 8, push: 0, pull: 0, offset: 9 }"
        class="blue"
      >
        <div></div>
      </el-col>
        <!-- 分隔 -->
      <el-col
        class="green"
        :lg="{ span: 8, pull: 0, push: 0 }"
      >
        <div></div>
      </el-col>
    </el-row>
    
    * {
      transition: 1s;
    }
    
    .dark {
      height: 500px;
      background-color: rgb(137, 133, 133);
    }
    
    .yellow {
      background-color: rgb(176, 170, 80);
      height: 100px;
    }
    .green {
      background-color: rgb(85, 144, 135);
      height: 100px;
    }
    
    .blue {
      background-color: rgb(65, 115, 153);
      height: 100px;
    }
    

    在这里插入图片描述


    总结

    约到一场15日的面试, 但是封校不得不推掉了, 很难受.

    如果这篇文章帮到你, 我很荣幸.

    展开全文
  • 使用el-rowel-col制作表格及表格下方的展开/收起按钮 效果图如下 动态图 收起状态 展开状态 无数据状态 功能: ● 默认展示三行数据,超出三行的数据被折叠,点击展开按钮,即可展开 ● 如果没有数据,...

    使用el-row、el-col制作表格及表格下方的展开/收起按钮

    效果图如下

    • 动态图

    在这里插入图片描述

    • 收起状态
    • 展开状态
    • 无数据状态

    功能:

    ● 默认展示三行数据,超出三行的数据被折叠,点击展开按钮,即可展开
    ● 如果没有数据,展示内容为:暂无数据,且展开按钮也不显示
    ● 如果数据不到三行或者只有三行,那么展开按钮不显示

    思路:

    • 使用el-rowel-col将表格的雏形可以先绘制出来

      • el-col中的span将一行分为24份
      • 具体样式看下面的css代码
    • 默认展示三行数据,超出三行的数据被折叠

      • 将展示的数据放在一个数组中,使用v-for循环遍历
      • 使用v-show判断index是否小于3,⚠️ 这里不能使用v-if,因为v-forv-if不推荐同时使用
    • 展开与收起的实现

      • 定义一个变量,定义为false,再定义一个方法监听这个值的改变,具体实现看代码
    • 具体实现看代码

    为什么v-if和v-for不推荐同时使用

    • v-for指令基于一个数组来渲染一个列表
    • v-for 指令基于一个数组来渲染一个列表
    • v-forv-if优先级高,所以使用的话,每次v-for都会执行v-if,造成不必要的计算,影响性能,尤其是当之需要渲染很小一部分的时候。
    <template>
      <div class="overview-system-state">
        <div class="overview-system-state__row">
          <div class="title">{{ labelInfo.title }}</div>
          <div class="set action-link">{{ labelInfo.set }}</div>
        </div>
        <div class="overview-system-state__labels">
          <el-row class="header">
            <el-col :span="2">弱点数</el-col>
            <el-col :span="2">风险数</el-col>
            <el-col :span="6">分系统名称</el-col>
            <el-col :span="8">分系统地址</el-col>
            <el-col :span="3">系统风险指数</el-col>
            <el-col :span="3">系统状态</el-col>
          </el-row>
          <div v-if="labelInfo.list.length !== 0">
            <el-row
            class="state-item"
            justify="center"
            v-for="(item, index) in labelInfo.list"
            :key="index"
            v-show="index < 3 || isOpen"
          >
            <el-col :span="2">
              <span class="state-item__span">{{ item.weaknessCnt }}</span>
            </el-col>
            <el-col :span="2">
              <span class="state-item__span">{{ item.riskCnt }}</span>
            </el-col>
            <el-col :span="6">
              <span class="state-item__span">{{ item.subsystemName }}</span>
            </el-col>
            <el-col :span="8">
              <span class="state-item__span">{{
                item.subsystemIp
              }}</span>
            </el-col>
            <el-col :span="3">
              <span
                class="status-item__top__wei"
                :class="
                  'status-item__top__' + levelMap[item.riskExponent.riskLevel]
                "
              >
                <qz-icon :class="levelMap[item.riskExponent.riskLevel]"></qz-icon>
                <span>{{ item.riskExponent.count || 0 }}</span>
                <qz-icon
                  v-if="item.riskExponent.exponentTrend !== 'mid'"
                  :class="
                    item.riskExponent.exponentTrend === 'up'
                      ? 'add-color icon-jiantou-hong'
                      : 'decrease-color icon-jiantou-lv'
                  "
                ></qz-icon>
              </span>
            </el-col>
            <el-col :span="3">
              <div class="status-item__status">
                <span :class="'status-item__status__' + stateMapEn[item.state]">{{
                  stateMap[item.state]
                }}</span>
              </div>
            </el-col>
          </el-row>
          </div>
          <el-row v-show="labelInfo.list.length <= 0" style="text-align: center">
            暂无数据
          </el-row>
        </div>
        <div class="overview-system-state__footer" v-if="labelInfo.list.length > 3">
          <div class="overview-system-state__footer__item">
            <div class="action-link" @click="handleOpen">
              <span>{{ !isOpen ? "展开" : "收起" }}</span>
              <qz-icon
                :class="!isOpen ? 'icon-arrow-down-copy' : 'icon-arrow-up'"
                style="font-size: 14px; padding-left: 5px"
              ></qz-icon>
            </div>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          isOpen: false,
          stateMap: {
            0: "异常",
            1: "正常",
          },
          stateMapEn: {
            0: "abnormal",
            1: "normal",
          },
          levelMap: {
            1: "icon-diwei",
            2: "icon-zhongwei",
            3: "icon-gaowei",
          },
          labelInfo: {
            title: "分系统状态",
            set: "设置",
            list: [
              {
                weaknessCnt: 66,
                riskCnt: 77,
                subsystemName: 'Kylin',
                subsystemIp: '192.168.1.102',
                riskExponent: {
                  riskLevel: 1,
                  count: 25,
                  exponentTrend: 'up'
                },
                state: 0
              },
              {
                weaknessCnt: 66,
                riskCnt: 77,
                subsystemName: 'Kylin',
                subsystemIp: '192.168.1.102',
                riskExponent: {
                  riskLevel: 2,
                  count: 25,
                  exponentTrend: 'down'
                },
                state: 1
              },
              {
                weaknessCnt: 66,
                riskCnt: 77,
                subsystemName: 'Kylin',
                subsystemIp: '192.168.1.102',
                riskExponent: {
                  riskLevel: 3,
                  count: 25,
                  exponentTrend: 'up'
                },
                state: 1
              },
              {
                weaknessCnt: 66,
                riskCnt: 77,
                subsystemName: 'Kylin',
                subsystemIp: '192.168.1.102',
                riskExponent: {
                  riskLevel: 1,
                  count: 25,
                  exponentTrend: 'up'
                },
                state: 0
              },
            ],
          },
        };
      },
      methods: {
        // 控制展开/收起
        handleOpen() {
          this.isOpen = !this.isOpen;
        },
      },
    };
    </script>
    
    <style lang="less">
    // flex样式
    .flex(@justify-content,@align-items) {
      display: flex;
      align-items: @align-items;
      justify-content: @justify-content;
    }
    // 边框样式
    .border-style() {
      background: #ffffff;
      border: 1px solid #ececee;
    }
    .overview-system-state {
      width: 100%;
      padding: 20px;
      .border-style();
      & .add-color {
        color: #ff2828;
      }
      & .decrease-color {
        color: #33c17e;
      }
      &__row {
        margin-bottom: 20px;
        .flex(space-between, center);
      }
      &__labels {
        border: 1px solid #e4e7ed;
        & .header {
          font-weight: 400;
          font-size: 14px;
          font-family: PingFangSC-Medium;
          color: #000000 !important;
        }
        & .state-item {
          &__span {
            cursor: pointer;
          }
        }
        .el-row {
          height: 42px;
          line-height: 42px;
          color: #666666;
          font-size: 14px;
          font-weight: 400;
          &:first-child {
            font-family: 400;
          }
          &:last-child {
            border-right: none;
          }
        }
        .el-col {
          height: 42px;
          line-height: 42px;
          border-bottom: 1px solid #e4e7ed;
          border-right: 1px solid #e4e7ed;
          align-items: center;
          text-align: center;
          &:last-child {
            border-right: none;
          }
        }
        & .status-item {
          &__top {
            position: relative;
            &__title {
              font-family: PingFangSC-Medium;
              font-size: 16px;
              color: #333333;
              font-weight: 500;
              cursor: pointer;
            }
            &__icon-gaowei {
              color: #f55959;
            }
            &__icon-zhongwei {
              color: #f9ad33;
            }
            &__icon-diwei {
              color: #e1ce38;
            }
            &__wei {
              cursor: pointer;
              & span {
                margin-left: 5px;
                color: #606266;
              }
            }
          }
          &__status {
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #606266;
            font-weight: 400;
            &__normal {
              background: #95ce68;
            }
            &__abnormal {
              background: #f55959;
            }
            & span {
              display: inline-block;
              width: 38px;
              height: 17px;
              line-height: 17px;
              text-align: center;
              border-radius: 8px;
              font-family: PingFangSC-Medium;
              font-size: 12px;
              color: #ffffff;
              font-weight: 500;
              cursor: pointer;
            }
          }
          &__label {
            margin-top: 23px;
            height: 109px;
            background: #f8f9fd;
            padding: 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            span {
              font-size: 16px;
              &:hover {
                color: #47a5e7;
                cursor: pointer;
              }
            }
          }
        }
      }
      &__footer {
        margin-top: 10px;
        text-align: center;
        align-items: center;
        &__item {
          width: 50px;
          margin: 0 auto;
        }
      }
    }
    </style>
    
    展开全文
  • Element el-row el-col 布局组件详解

    万次阅读 多人点赞 2021-01-27 10:18:12
    1. 背景 element的布局方式与bootstrap...el-row>标签标识,然后每行内的列使用<el-col>标识,至于每列整行的宽度比例,则使用:span属性进行设置。 如下代码,即为将1行等分为2列,为了便于区分列,我们为列

    点此查看全部文字教程、视频教程、源代码

    1. 背景

    element的布局方式与bootstrap原理是一样的,将网页划分成若干行,然后每行等分为若干列,基于这样的方式进行布局,形象的成为栅栏布局。

    区别是element可将每行划分为24个分栏,而bootstrap是划分为12个分栏,从使用角度,还是24个分栏更加精细。

    2. 分栏布局

    首先每行使用<el-row>标签标识,然后每行内的列使用<el-col>标识,至于每列整行的宽度比例,则使用:span属性进行设置。

    如下代码,即为将1行等分为2列,为了便于区分列,我们为列添加了不同的样式,另外注意<el-divider></el-divider>是分割线,此处用于区分不同的示例。

    <template>
      <div>
      	<span>每行24分栏布局</span>
        <el-row>
          <el-col :span="12" class="lightgreen-box">示例1</el-col>
          <el-col :span="12" class="orange-box">示例1</el-col>
        </el-row>
        <el-divider></el-divider>
      </div>
    </template>
    <style scoped>
    	.lightgreen-box {
    	  background-color: lightgreen;
    	  height: 24px;
    	}
    	.orange-box {
    	  background-color: orange;
    	  height: 24px;
    	}
    </style>
    

    效果如下:
    在这里插入图片描述

    3. 分栏间隔

    有时候想为不同分栏之间设定一定的间隔,可以使用<el-row>标签的:gutter属性,注意默认间隔为0。

    此时需要注意的是,下面的写法,间隔是不生效的。

     	<span>分栏间隔 无效</span>
        <el-row :gutter="50">
          <el-col :span="8" class="lightgreen-box">示例2</el-col>
          <el-col :span="8" class="orange-box">示例2</el-col>
          <el-col :span="8" class="lightgreen-box">示例2</el-col>
        </el-row>
        <el-divider></el-divider>
    

    需要在分栏里面新增元素,才能实现分栏间隔,代码修改如下则间隔生效。

     <span>分栏间隔 有效</span>
        <el-row :gutter="24">
          <el-col :span="8">
            <div class="lightgreen-box">示例3</div>
          </el-col>
          <el-col :span="8">
            <div class="orange-box">示例3</div>
          </el-col>
          <el-col :span="8">
            <div class="lightgreen-box">示例3</div>
          </el-col>
        </el-row>
        <el-divider></el-divider>
    

    上面两个示例效果如下:
    在这里插入图片描述

    4. 分栏偏移

    有时候想让某个分栏不从左边显示,而是直接显示到中间或者右侧,例如右侧导航栏,我们希望它处于右侧且占据页面1/3的宽度。此时可以借助offset属性来实现,表示偏移量。

    此时,想占据1/3宽度,则:span应为8,偏移量应为24-8=16,所以代码如下:

      	<span>分栏偏移</span>
        <el-row>
          <el-col :span="8" :offset="16">
            <div class="lightgreen-box">示例4</div>
          </el-col>
        </el-row>
        <el-divider></el-divider>
    

    效果如下:
    在这里插入图片描述

    4. 对齐方式

    如果想让整个行居左、居中、居右对齐,则可以直接设置<el-row>的对齐方式。

    此时需要先设置type="flex"来启用对齐方式,然后通过justify属性来设置具体的对齐方式,例如下面的例子实现了居中对齐。

     	<span>对齐方式</span>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <div class="lightgreen-box">示例5</div>
          </el-col>
        </el-row>
        <el-divider></el-divider>
    

    在这里插入图片描述

    5. 响应式布局

    element和bootstrap的响应式布局原理相同,都是通过为列设置不同分辨率下的占用宽度比例来实现的。

    例如我们想实现在比较大的分辨率(电脑),每分栏占据屏幕宽度的1/4,而在比较小宽度(手机),每分栏占据屏幕全部宽度。这样就能保证在手机上也能完整显示内容,则可以使用如下代码:

       <span>响应式布局</span>
        <el-row>
          <el-col :lg="6" :xs="24" class="lightgreen-box">示例6</el-col>
          <el-col :lg="6" :xs="24" class="orange-box">示例6</el-col>
          <el-col :lg="6" :xs="24" class="lightgreen-box">示例6</el-col>
          <el-col :lg="6" :xs="24" class="orange-box">示例6</el-col>
        </el-row>
    

    在电脑上效果如下:
    在这里插入图片描述
    在手机上效果如下:
    在这里插入图片描述
    注意具体的尺寸属性为:

    属性使用说明
    xs宽度<768px
    sm>=768px
    md>=992px
    lg>=1200px
    xl>=1920px

    6. 小结

    element的布局跟bootstrap原理是一样的,使用起来也比较方便,具体的参数其实不需要都记住,只要知道用法,使用时去官网查询即可。

    展开全文
  • 之前一直把循环体加入到el-row中,循环出来的结果一直是纵向循环,右边那两个的数据没有循环到,以下就是我错误的示范: 正确的方式应该放在每个要执行的el-col中,这样执行出来的结果才会是你要循环遍历的数组,...
  • vue 横向表格 (el-row,el-col)栅格布局

    千次阅读 2022-05-25 15:32:00
    今天用ui库的 栅格布局(el-row,el-col) 简单写个横向表格 横向表格一般都是展示某个 对象(Object) 的数据而, 这时候我们要把对象转化成 数组(Array) 当然拉我是手动转换的, 大家也可以封装方法 ^_^ 最终效果 原数据...
  • el-row> <el-col> 与<el-table-column>用法区别! 初学者可能很容易混淆它们的用法,其实是没有认真看官方文档,下面总结一下: <el-row> <el-col>标签是属于element的Layout布局控件...
  • el-col是基于vue封装的组件,不支持原生事件的触发。 无效: <el-col :span="4" @click="tagPlatform"> <img class="image_icon" src="@/assets/images/labelTag.png" alt=""/> <div class=...
  • el-row :gutter='40'> <el-col :xs="12" :sm="12" :lg="6">第一个</el-col> </el-row> 对于el-row,其常用属性和方法下表 参数 说明 可选值 gutter 栅格间距 type 布局模式,可选...
  • Element-UI el-row el-col 布局

    千次阅读 2020-11-21 20:01:02
    el-row :gutter=“30”> el-col :span=“24” v-for="(item,index) in list" :key=“index” ** @click.native="handleClick() el-card :body-style="{ padding: '5px' }" > hello /el-card> /el-col>...
  • <divclass="home"style="border:1pxsolidred;margin-top:40px">...el-row:gutter="10"> <!--span默认el-row为24用span去平分--> <el-col:span="6"> <el-card>card1&...
  • el-rowel-col导致排版问题 解决办法 .el-row { display: flex; flex-wrap: wrap; }
  • elementui中el-rowel-col排列混乱

    千次阅读 2021-02-18 15:08:48
    问题: el-rowel-col排列混乱 解决方案: 将el-row中元素改为flex布局 设置flex-wrap: wrap,避免el-row中元素span之和超过24时挤在一行 .el-row{ display:flex; flex-wrap: wrap; }
  • 在使用element ui中的el-row的gutter属性时,组件无法实现间隔 对应的错误代码 <el-row :gutter="20"> <el-col :span="6" class="col">占用6份</el-col> <el-col :span="6" class="col">...
  • element在使用el-rowel-col会出现一些小bug,多行解构会造成排版混乱在style中添加 <style lang="scss" scoped> .el-row{ display:flex; flex-wrap: wrap; } </style>
  • ElementUI-<el-row>、<el-col>

    万次阅读 2020-11-13 11:51:18
    el-row> <el-col> 并没有搞懂到底啥区别,仔细看了下官方文档(所以就是以前看的不认真喽)<el-row> <el-col>标签是属于element的Layout布局控件,并且分成24分栏。 可以理解为<div>=&...
  • 用饿了吗el-rowel-col布局页面的时候会因为el-col的内容高度不统一,造成布局混乱,解决方案就是在el-row中添加type=“flex”。 <el-row type="flex"> <el-col> <textarea autocomplete="off" ...
  • 查阅官方文档,只需要在el-row中设置属性align为middle即可 这是我找到这位老哥的博客 本来问题到这里就应该结束了,可是我也看官方文档了啊,为社么没有效果呢,看了下评论真的时给我逗乐了hhhh。 其实,我心里...
  • 使用的工具版本 vue-cli 4.5.13 vue 3.x ,其他版本可能遇不到这个问题/doge 笔者这里使用的是vue ui安装的 有图形话的安装为什么不用...row ,el-col等等才会生效不会报错提示 can’t resolve el-rol and el-col的问题了
  • el-row和el-col 处理动态多列数据时, 出现了高度不适应且排列混乱 ....el-row-inline { display: flex; flex-wrap: wrap; } 2、内部元素设置高度100% .el-card { min-width: 100%; height: 100%; } ...
  • el-col、el-row添加点击事件

    千次阅读 2020-08-20 17:57:03
    el-col、el-row添加点击事件 要为el-col和el-row添加点击事件,不能用常用的v-on:click=”function()”或@click=”function()”添加点击事件,应该使用v-on:click.native="function()"或@click=”function()”添加...
  • el-row里的栅格不在同一行

    千次阅读 2021-06-28 15:50:47
    el-row里的el-col不在同一行显示 按照elementui文档写的,其他几行都没有问题,有一行里面的col 被分成了两行显示 代码如下: <el-row :gutter="20"> <el-col :span="6"> <el-form-item label=...
  • vue中el-row使用

    千次阅读 2021-07-18 14:51:05
    vue中el-row使用: <el-row> <el-col :span="24"> <span>产品名称:</span> <span id="productName" name="productName">XXX</span> </el-col> </el-row> <...
  • 在使用element ui中的el-row的gutter属性时,组件无法实现间隔,在设置了gutter属性后,依然维持原样,而控制台不报错 如图 对应的错误代码 <template> <div> <h3>layout组件的使用</h3>...
  • el-rowel-col,flex结合布局

    千次阅读 2020-06-17 09:21:20
    记录下用flex和el-rowel-col做的一个布局 外层包裹一个div,用于设置高宽,背景色,padding和margin值,元素水平垂直居中用flex布局 css样式 wrapper里面的元素根据需求设置span的值即可 目前总结这么多,随着...
  • 解决 代码 <template> <el-form :model="formInline" label-width="105px">...el-row style="display: flex;flex-wrap:wrap; justify-content: left"> <el-form-item label="审批人.
  • 大家可能在使用el-row el-col进行布局的时候,可能会出现没有数据,el-col没有占位,如下图1的情况:   上图2是代码,在数据为空的时候。下图1为有数据之后:   上图2是加上数据之后的代码,el-row el-col布局...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 54,561
精华内容 21,824
关键字:

el-row