vue3 el-checkbox 筛选勾选项

在 Vue 3 中，如果你想要筛选一个数组中使用了 el-checkbox 组件的所有勾选项，你可以通过绑定 v-model 到每个 el-checkbox 并使用计算属性（computed properties）或方法来处理这些勾选项。下面是一些实现这个功能的方法：

方法 1：使用计算属性

首先，确保你已经安装并引入了 Element Plus。

npm install element-plus --save

在你的 Vue 组件中：

<template>
  <div>
    <el-checkbox-group v-model="checkedItems">
      <el-checkbox v-for="item in items" :label="item.value" :key="item.id">{{ item.name }}</el-checkbox>
    </el-checkbox-group>
    <p>选中的项：{{ checkedItems }}</p>
  </div>
</template>
 
<script setup>
import { ref, computed } from 'vue';
import { ElCheckbox, ElCheckboxGroup } from 'element-plus';
 
const items = ref([
  { id: 1, name: '选项1', value: 'value1' },
  { id: 2, name: '选项2', value: 'value2' },
  { id: 3, name: '选项3', value: 'value3' }
]);
 
const checkedItems = ref([]); // 用于存储勾选的项的label值
 
// 使用计算属性显示选中的项的详细信息（如果需要）
const selectedItems = computed(() => {
  return items.value.filter(item => checkedItems.value.includes(item.value));
});
</script>

方法 2：使用方法筛选勾选项

如果你需要更复杂的逻辑来处理勾选的项，可以使用方法：

<template>
  <div>
    <el-checkbox-group v-model="checkedItems">
      <el-checkbox v-for="item in items" :label="item.value" :key="item.id" @change="handleCheckboxChange">{{ item.name }}</el-checkbox>
    </el-checkbox-group>
    <p>选中的项：</p>
    <ul>
      <li v-for="item in selectedItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>
 
<script setup>
import { ref, computed } from 'vue';
import { ElCheckbox, ElCheckboxGroup } from 'element-plus';
 
const items = ref([
  { id: 1, name: '选项1', value: 'value1' },
  { id: 2, name: '选项2', value: 'value2' },
  { id: 3, name: '选项3', value: 'value3' }
]);
 
const checkedItems = ref([]); // 用于存储勾选的项的label值
const selectedItems = ref([]); // 存储选中的详细项信息，可以根据需要调整逻辑复杂度
 
function handleCheckboxChange() {
  selectedItems.value = items.value.filter(item => checkedItems.value.includes(item.value));
}
</script>

在这个例子中，handleCheckboxChange 方法在每次复选框状态改变时被调用，用来更新 selectedItems，这是一个根据 checkedItems 过滤后的数组，包含所有勾选的详细项信息。你可以根据需要调整 selectedItems 的内容，例如直接使用 checkedItems 来显示简单的值列表，或者像示例中那样显示更详细的项信息。