elementui中单选框组、多选框组内容纵向排列

在Element UI中，单选框组和多选框组默认是横向排列的。要使它们纵向排列，可以通过Flex布局来实现。

以下是单选框组和多选框组在纵向排列的示例代码：

<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="单选框">
      <el-radio-group v-model="form.radio" style="display: flex; flex-direction: column;">
        <el-radio :label="1">选项A</el-radio>
        <el-radio :label="2">选项B</el-radio>
        <el-radio :label="3">选项C</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="多选框">
      <el-checkbox-group v-model="form.checkbox" style="display: flex; flex-direction: column;">
        <el-checkbox :label="1">选项A</el-checkbox>
        <el-checkbox :label="2">选项B</el-checkbox>
        <el-checkbox :label="3">选项C</el-checkbox>
      </el-checkbox-group>
    </el-form-item>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        radio: 1,
        checkbox: [1, 2]
      }
    };
  }
};
</script>

在上述代码中，我们使用了display: flex和flex-direction: column来使单选框组和多选框组中的选项纵向排列。el-radio-group和el-checkbox-group包裹的元素设置了这个样式，使得它们的子元素（单选框和多选框）纵向排列。