antd 复选框（a-checkbox-group）纵向排列

1. 场景介绍

Checkbox组 默认都是横向显示，需求是改成纵向显示。

2. 解决办法

填一段代码 style="display: grid;"

3. 效果展示

4. 完整代码

<template>
  <div>
    <a-checkbox-group
      v-model="value"
      name="checkboxgroup"
      :options="plainOptions"
      style="display: grid;"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: [],
      plainOptions: ['Apple', 'Pear', 'Orange'],
    }
  }
}
</script>

5. 解析

• grid
  该元素的行为类似块级元素并且根据网格模型布局它的内容。