vue3antd多选框

vue3antd的多选框可以通过使用ant-design-vue库来实现。根据引用和引用的代码，你可以按需引入`Checkbox`组件，并在UI代码中使用`a-checkbox`和`a-checkbox-group`标签创建多选框。

下面是一个示例代码，展示如何在vue3antd中使用多选框：

<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`以及事件处理函数绑定到模板中。