Python私教张大鹏 Vue3整合AntDesignVue之Checkbox 多选框

<template>
  <a-checkbox-group v-model:value="checkedList" @change="onCheckboxChange">
    <a-row>
      <a-col :span="4" v-for="(item, index) in checkboxList" :key="index">
        <a-checkbox :value="item.value">{{ item.label }}</a-checkbox>
      </a-col>
    </a-row>
  </a-checkbox-group>
</template>
 
<script>
import { ref } from 'vue';
import { Checkbox, CheckboxGroup, Row, Col } from 'ant-design-vue';
export default {
  components: {
    'a-checkbox-group': CheckboxGroup,
    'a-checkbox': Checkbox,
    'a-row': Row,
    'a-col': Col
  },
  setup() {
    const checkedList = ref([]);
    const checkboxList = [
      { label: '选项A', value: 'A' },
      { label: '选项B', value: 'B' },
      { label: '选项C', value: 'C' }
    ];
 
    const onCheckboxChange = (checkedValues) => {
      console.log('checked = ', checkedValues);
    };
 
    return {
      checkedList,
      checkboxList,
      onCheckboxChange
    };
  }
};
</script>

这个代码实例展示了如何在Vue3中使用Ant Design Vue库的Checkbox和CheckboxGroup组件来创建一个多选框列表。checkedList是一个响应式数据，用于绑定当前选中的值。checkboxList定义了多选框的选项。onCheckboxChange是一个事件处理函数，当复选框的选中状态发生变化时会被调用。