elementui两个el-checkbox竖直排布

可以使用CSS的flex布局来实现elementui中两个el-checkbox竖直排布的效果。具体实现方法如下所示：

<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竖直排布的效果。

相关问题

vue+elementui多选框el-checkbox-group

vue和ElementUI是一种很受欢迎的前端开发技术和UI库，el-checkbox-group是ElementUI所提供的多选框组件，它可以在vue应用中快速实现多选框的功能。

使用el-checkbox-group需要先引入ElementUI库，它提供了一套完整的UI组件库，包括表单、弹窗、导航、布局等。

在vue组件中，使用el-checkbox-group可以通过v-model绑定一个数据来获取所选的所有值。这个数据可以是一个数组，也可以是一个对象。

el-checkbox-group会根据传入的options数组来生成多选框，每个选项都是一个对象，包括label和value两个属性。其中label用来表示选项的文本，value用来表示选项的值。

通过设置el-checkbox-group的属性，可以定制多选框的风格和功能，比如设置禁用、设置默认选中的值、设置最多可选数量等。

在实际的开发中，el-checkbox-group通常用于表单中的多选题、筛选条件等场景中。它的使用非常简单，只需按照规定格式传入选项数据即可实现多选框的功能，为vue开发提供了很大的便利。

elementui两个多选框竖直排布

可以使用CSS中的浮动属性来实现elementui中两个多选框的竖直排布。具体步骤如下：
1. 在HTML中，将两个多选框放在同一个div中。
2. 在CSS中，设置这个div的宽度和高度，并将其内部的多选框浮动到左侧。
3. 为这个div添加clear:both属性，以防止其他元素受到影响。

以下是示例代码：

<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>

.checkbox-wrapper {
  width: 100%;
  height: auto;
  overflow: hidden;
}

.el-checkbox-group {
  float: left;
}

.checkbox-wrapper::after {
  content: "";
  display: block;
  clear: both;
}