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

小泡泡c

已于 2023-03-24 16:13:20 修改

阅读量3k

点赞数 2

分类专栏： Ant Design 文章标签：前端 javascript css

于 2023-03-06 15:02:31 首次发布

本文链接：https://blog.csdn.net/qq_45325810/article/details/129362630

版权

Ant Design 专栏收录该内容

13 篇文章

订阅专栏

文章介绍了在遇到Checkbox默认横向显示，需要改为纵向显示的需求时，通过在样式中添加display:grid属性来实现这一转变。提供了一个Vue.js模板代码示例，展示了如何应用此样式改变Checkbox组的布局方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>