elementui两个el-checkbox竖直排布
时间: 2023-12-30 11:22:37 浏览: 31
可以使用CSS的flex布局来实现elementui中两个el-checkbox竖直排布的效果。具体实现方法如下所示:
```html
<template>
<div class="checkbox-wrapper">
<el-checkbox>选项1</el-checkbox>
<el-checkbox>选项2</el-checkbox>
</div>
</template>
<style>
.checkbox-wrapper {
display: flex;
flex-direction: column;
}
</style>
```
在上述代码中,我们首先在template标签中添加了两个el-checkbox组件,然后在样式中使用了flex布局,并将flex-direction属性设置为column,这样就可以实现两个el-checkbox竖直排布的效果。
相关问题
elementui两个多选框竖直排布
可以使用CSS中的浮动属性来实现elementui中两个多选框的竖直排布。具体步骤如下:
1. 在HTML中,将两个多选框放在同一个div中。
2. 在CSS中,设置这个div的宽度和高度,并将其内部的多选框浮动到左侧。
3. 为这个div添加clear:both属性,以防止其他元素受到影响。
以下是示例代码:
```html
<div class="checkbox-wrapper">
<el-checkbox-group v-model="checkedCities">
<el-checkbox label="北京"></el-checkbox>
<el-checkbox label="上海"></el-checkbox>
<el-checkbox label="广州"></el-checkbox>
<el-checkbox label="深圳"></el-checkbox>
</el-checkbox-group>
<el-checkbox-group v-model="checkedHobbies">
<el-checkbox label="篮球"></el-checkbox>
<el-checkbox label="足球"></el-checkbox>
<el-checkbox label="羽毛球"></el-checkbox>
<el-checkbox label="乒乓球"></el-checkbox>
</el-checkbox-group>
</div>
```
```css
.checkbox-wrapper {
width: 100%;
height: auto;
overflow: hidden;
}
.el-checkbox-group {
float: left;
}
.checkbox-wrapper::after {
content: "";
display: block;
clear: both;
}
```
让el-checkbox-group中的el-checkbox分两排显示
为了让el-checkbox-group中的el-checkbox分两排显示,可以使用CSS中的flex布局。具体步骤如下:
1.在el-checkbox-group的样式中添加display:flex;flex-wrap:wrap;属性,使其成为一个flex容器,并且可以换行。
2.在el-checkbox的样式中添加flex-basis属性,设置每个el-checkbox的基础宽度。
3.在el-checkbox的样式中添加margin-right属性,设置每个el-checkbox之间的间距。
下面是示例代码:
```html
<template>
<el-checkbox-group class="checkbox-group">
<el-checkbox v-for="item in checkboxList" :key="item.value" :label="item.value">{{ item.label }}</el-checkbox>
</el-checkbox-group>
</template>
<style>
.checkbox-group {
display: flex;
flex-wrap: wrap;
}
.el-checkbox {
flex-basis: 50%; margin-right: 0;
}
</style>
```