Vue3多选框如何取消选择

在Vue3中，如果你使用的是Element UI等库提供的`el-checkbox`或多选框组件，取消选择通常是通过`v-model`绑定的数据驱动来操作。当你想要清空所有已选的选项，可以这样做：

<template>
  <div>
    <el-checkbox-group v-model="selectedItems">
      <el-checkbox :label="item" v-for="(item, index) in options" :key="index">{{ item }}</el-checkbox>
    </el-checkbox-group>
    <button @click="clearSelection">取消选择</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedItems: [], // 存放选中的项
      options: ['选项1', '选项2', '选项3'], // 可选项列表
    };
  },
  methods: {
    clearSelection() {
      this.selectedItems = []; // 点击按钮时，将selectedItems重置为空数组
    },
  },
};
</script>

在这个例子中，当点击“取消选择”按钮时，`clearSelection`方法会被调用，`selectedItems`数组会变回初始状态，所有的选项都会被取消选择。