40 lines
976 B
Markdown
40 lines
976 B
Markdown
|
<cn>
|
|||
|
|
#### 布局
|
|||
|
|
Checkbox.Group内嵌Checkbox并与Grid组件一起使用，可以实现灵活的布局
|
|||
|
|
</cn>
|
|||
|
|
|
|||
|
|
<us>
|
|||
|
|
#### Use with grid
|
|||
|
|
We can use Checkbox and Grid Checkbox.group, to implement complex layout
|
|||
|
|
</us>
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<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>
|
|||
|
|
```
|