脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Element布局组件el-row和el-col

Element布局组件el-row和el-col的使用

 更新时间：2024年08月16日 09:14:38   作者：帥偉จุ๊บ  
这篇文章主要介绍了Element布局组件el-row和el-col的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

Element布局组件el-row和el-col

分栏布局

首先每行使用<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>

效果如下：

分栏间隔

不同分栏之间设定一定的间隔，可以使用<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>

上面两个示例效果如下：

分栏偏移

el-row和el-col在element ui中的注意点

el-row是将一行分成24份。代表一行。

  • el-row中写el-col，el-col代表的是列，写几个el-col就表示有几列。
  • 列的宽度用span来规定。
  • 表示你这列占这一行24份中的几份。

注意：

  • el-row中只有1个el-col的时候，el-col的span可以不用写，它默认占一行的24份，但是el-row有多个el-col的时候，el-col必须要写span

注意：

  • 不管el-row里嵌套多少el-row,el-row都代表24份
//第1层的el-row表示1行，这行分成24份
//父元素
<el-row>
    <el-col>
        //下面这个el-row是子元素，但是它也是一行，这一行有24份
        <el-row>
            //下面的el-col，这一列，要想占满这行，就是占24份,span要为24才行，记住，el-row表示24份
            <el-col :span="24"></el-col>
        </el-row>
    </el-col>
</el-row>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue窗口变化onresize详解

    vue窗口变化onresize详解

    这篇文章主要介绍了vue窗口变化onresize,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • 写一个Vue Popup组件

    写一个Vue Popup组件

    这篇文章主要介绍了写一个Vue Popup组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-02-02
  • 在vue中使用Echarts画曲线图的示例

    在vue中使用Echarts画曲线图的示例

    这篇文章主要介绍了在vue中使用Echarts画曲线图的示例，帮助大家在vue中绘制图表，感兴趣的朋友可以了解下
    2020-10-10
  • IE9 elementUI文件上传的问题解决

    IE9 elementUI文件上传的问题解决

    这篇文章主要介绍了IE9 elementUI文件上传的问题解决，有需要了解IE9 elementUI文件上传的朋友可参考。希望此文章对各位有所帮助
    2018-10-10
  • Vue $router.push打开新窗口的实现方法

    Vue $router.push打开新窗口的实现方法

    在Vue中,$router.push方法默认不支持在新窗口中打开页面,但通过结合window.open方法和$router.resolve方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-09-09
  • vue3.0中友好使用antdv示例详解

    vue3.0中友好使用antdv示例详解

    这篇文章主要给大家介绍了关于在vue3.0中如何友好使用antdv的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • Vue的自定义事件之组件通信工具详解

    Vue的自定义事件之组件通信工具详解

    这篇文章主要介绍了Vue的自定义事件之组件通信工具详解,Vue的自定义事件(Custom Events)是一种强大的工具,用于实现组件之间的通信和数据传递,本文将深入探讨什么是Vue的自定义事件,以及如何自定义和使用它们,需要的朋友可以参考下
    2023-10-10
  • 简述Vue中容易被忽视的知识点

    简述Vue中容易被忽视的知识点

    这篇文章主要介绍了简述Vue中容易被忽视的知识点，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • vue+koa2实现session、token登陆状态验证的示例

    vue+koa2实现session、token登陆状态验证的示例

    这篇文章主要介绍了vue+koa2实现session、token登陆状态验证的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • 详解为什么Vue中不要用index作为key(diff算法)

    详解为什么Vue中不要用index作为key(diff算法)

    这篇文章主要介绍了详解为什么Vue中不要用index作为key(diff算法)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04

最新评论