ant-design-vue/components/checkbox/demo/layout.md

976 B
Raw Blame History

#### 布局 Checkbox.Group内嵌Checkbox并与Grid组件一起使用可以实现灵活的布局 #### Use with grid We can use Checkbox and Grid Checkbox.group, to implement complex layout
<template>
  <a-checkbox-group @change="onChange">
    <AntRow>
      <AntCol :span="8"><a-checkbox value="A">A</a-checkbox></AntCol>
      <AntCol :span="8"><a-checkbox value="B">B</a-checkbox></AntCol>
      <AntCol :span="8"><a-checkbox value="C">C</a-checkbox></AntCol>
      <AntCol :span="8"><a-checkbox value="D">D</a-checkbox></AntCol>
      <AntCol :span="8"><a-checkbox value="E">E</a-checkbox></AntCol>
    </AntRow>
  </a-checkbox-group>
</template>
<script>
import { Checkbox, Row, Col } from 'antd'
export default {
  methods: {
    onChange (checkedValues) {
      console.log('checked = ', checkedValues)
    },
  },
  components: {
    Checkbox,
    AntRow: Row,
    AntCol: Col,
    CheckboxGroup: Checkbox.Group,
  },
}
</script>