**JCheckbox 使用文档** 功能说明: antd-vue checkbox组件处理的是数组,用起来不是很方便,特二次封装,使用时只需处理字符串即可 ***** [TOC] ## 参数配置 | 参数 | 类型 | 必填 |说明| |---------|--------|----|---------| | value|String | 无|value值| | options |array || checkbox需要配置的项,是个数组,数组中每个对象包含两个属性:label(用于显示)和value(用于存储) | | dictCode |string|| checkbox字典code配置,比如通过性别字典编码:sex,可以直接渲染出组件 | | disabled | Boolean | 否 | 是否禁用,默认值false | ## 使用示例 ---- ```vue <template> <a-form :model="form"> <a-row class="form-row" :gutter="16"> <a-col :lg="8"> <a-form-item label="options式用法" :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }"> <JCheckbox v-model:value="form.sport" :options="sportOptions"/> </a-form-item> </a-col> <a-col :lg="8"> <a-form-item label="dictCode式用法" :label-col="{ span: 6 }" :wrapper-col="{ span: 15 }"> <JCheckbox v-model:value="form.sex" dictCode="sex"/> </a-form-item> </a-col> </a-row> </a-form> </template> <script lang="ts" setup> import {JCheckbox} from '/@/components/Form'; import { reactive} from 'vue'; const form = reactive({ sex : '1', sport: '1,3' }); const sportOptions = [ { label:"足球", value:"1" },{ label:"篮球", value:"2" },{ label:"乒乓球", value:"3" }] </script> ``` 效果预览 ![](https://img.kancloud.cn/7d/52/7d52b9242e5965e664439f2dd1cdf3b0_865x105.png)