首页 > 网络编程 > 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