Antd Checkbox 多选框使用

1、单个多选值

{
  getFieldDecorator("key", {
    initialValue: true/false,
    valuePropName: "checked",
  })(
    <Checkbox
      onChange={(v) => {
        console.log(v.target.checked);//布尔类型  true/false
      }}
    >
      文案
    </Checkbox>
  );
}

2、多选数据组

{
  getFieldDecorator("key", {
    initialValue: [],
  })(
    <Checkbox.Group
      options={多选数组}
      onChange={(v) => {
        console.log(v);//数组  选中的数组
      }}
    />
  );
}

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3antd多选框可以通过使用ant-design-vue库来实现。根据引用和引用的代码,你可以按需引入`Checkbox`组件,并在UI代码中使用`a-checkbox`和`a-checkbox-group`标签创建多选框。 下面是一个示例代码,展示如何在vue3antd使用多选框: ```html <template> <a-row class="labelBox"> <a-col :span="4" class="label">选择学生:</a-col> <a-col :span="18"> <div class="checkBox"> <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange" :disabled="!unLockList.length>0"> 选择全部 </a-checkbox> <span>已选择 {{checkedList.length}} 个 / 可选学生 {{unLockList.length}} 个</span> </div> <a-checkbox-group class="optionsBox" v-model="checkedList" :options="plainOptions" @change="onAppChange" /> </a-col> </a-row> </template> <script> import { ref } from 'vue'; import { Checkbox } from 'ant-design-vue'; export default { components: { Checkbox, }, setup() { const plainOptions = ['学生1', '学生2', '学生3']; // 可选项 const checkedList = ref([]); // 已选择的项 const unLockList = ref([]); // 可选学生列表 const checkAll = ref(false); const indeterminate = ref(false); const onCheckAllChange = () => { // 处理选择全部的逻辑 }; const onAppChange = () => { // 处理选项改变的逻辑 }; return { plainOptions, checkedList, unLockList, checkAll, indeterminate, onCheckAllChange, onAppChange, }; }, }; </script> ``` 这段代码中,我们使用了`ref`函数来创建响应式的变量,将`plainOptions`、`checkedList`、`unLockList`、`checkAll`、`indeterminate`以及事件处理函数绑定到模板中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值