使用vue3 + el-checkbox-group做一个数据筛选

好的，下面是一个简单的示例代码，你可以根据自己的需求进行适当修改：

<template>
  <div>
    <el-checkbox-group v-model="selectedFruits">
      <el-checkbox label="apple">苹果</el-checkbox>
      <el-checkbox label="banana">香蕉</el-checkbox>
      <el-checkbox label="orange">橙子</el-checkbox>
    </el-checkbox-group>
    <button @click="filterData">筛选</button>
    <ul>
      <li v-for="fruit in filteredFruits" :key="fruit">{{ fruit }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fruits: ['苹果', '香蕉', '橙子', '西瓜', '葡萄'],
      selectedFruits: [],
    };
  },
  computed: {
    filteredFruits() {
      if (this.selectedFruits.length === 0) {
        return this.fruits;
      } else {
        return this.fruits.filter((fruit) => this.selectedFruits.includes(fruit.toLowerCase()));
      }
    },
  },
  methods: {
    filterData() {
      console.log(this.filteredFruits);
    },
  },
};
</script>

在上面的示例中，我们使用了 `el-checkbox-group` 组件来实现多选框的功能，并且将其选中的值保存到了 `selectedFruits` 变量中。然后我们通过计算属性 `filteredFruits` 来根据选中的值筛选出符合条件的水果列表。最后，我们在 `filterData` 方法中打印出了筛选后的水果列表。

注意，上面的示例代码中使用了 Element UI 的组件，如果你没有安装 Element UI，你需要先安装它。