一键选择全选、反选功能：vue 中 antd checkbox多选组件

2023-10-25 22:30:16

轻松掌握 Ant Design Vue Checkbox 多选功能

作为一名开发者，您可能会经常需要在您的应用程序中实现多项选择。Ant Design Vue 提供了一个强大的 Checkbox 组件，可让您轻松实现此功能，甚至包括全选和反选等高级选项。本文将深入探讨如何使用 Ant Design Vue Checkbox 组件实现多项选择，并提供详细的代码示例，帮助您轻松掌握这项功能。

Checkbox 多选的原理

实现 Checkbox 多选的关键在于使用 CheckboxGroup 组件。它是一个容器组件，可以包含多个 Checkbox 组件。当用户点击 CheckboxGroup 中的某个 Checkbox 时，该 Checkbox 的选中状态将被更新，CheckboxGroup 的值也将随之更新。

代码实现

以下代码示例演示了如何使用 CheckboxGroup 实现 Checkbox 多选：

<template>
  <a-checkbox-group v-model="checkedList">
    <a-checkbox :value="value" v-for="value in list" :key="value">{{ value }}</a-checkbox>
  </a-checkbox-group>
</template>

<script>
export default {
  data() {
    return {
      list: ['Apple', 'Orange', 'Banana', 'Pineapple'],
      checkedList: [],
    }
  },
}
</script>

在此示例中，list 是要提供选项的数组，checkedList 是存储选定值的响应式数组。

全选和反选

为了实现全选和反选功能，我们需要利用 CheckboxGroup 的 :default-value 属性和 @change 事件。

<template>
  <a-checkbox-group v-model="checkedList" :default-value="list" @change="handleChange">
    <a-checkbox :value="value" v-for="value in list" :key="value">{{ value }}</a-checkbox>
  </a-checkbox-group>
</template>

<script>
export default {
  data() {
    return {
      list: ['Apple', 'Orange', 'Banana', 'Pineapple'],
      checkedList: [],
    }
  },
  methods: {
    handleChange(value) {
      if (value.length === this.list.length) {
        this.checkedList = []
      } else {
        this.checkedList = this.list
      }
    }
  },
}
</script>