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

好的，下面是一个简单的示例：

首先，在Vue组件中定义一个数组`dataList`存放数据，以及一个数组`selectedList`存放用户选择的数据项：

<template>
  <div>
    <div v-for="item in dataList" :key="item.id">
      <el-checkbox v-model="selectedList" :label="item.id">{{ item.name }}</el-checkbox>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' },
        { id: 4, name: '选项4' },
      ],
      selectedList: [],
    };
  },
};
</script>

在模板中使用`v-for`指令循环渲染每个数据项，并将其绑定到对应的`el-checkbox`组件中。`v-model`指令将`selectedList`绑定到`el-checkbox`组件的选中状态上，`label`属性指定了该选项的唯一标识。

接下来，在组件中定义一个方法，用于处理用户点击确认按钮时的操作：

<template>
  <div>
    <div v-for="item in dataList" :key="item.id">
      <el-checkbox v-model="selectedList" :label="item.id">{{ item.name }}</el-checkbox>
    </div>
    <el-button @click="confirm">确认</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        { id: 1, name: '选项1' },
        { id: 2, name: '选项2' },
        { id: 3, name: '选项3' },
        { id: 4, name: '选项4' },
      ],
      selectedList: [],
    };
  },
  methods: {
    confirm() {
      console.log(this.selectedList); // 打印用户选择的数据项
    },
  },
};
</script>

在模板中添加一个确认按钮，并绑定`confirm`方法。`confirm`方法会打印用户选择的数据项。

这样就完成了一个简单的数据筛选组件。用户可以在界面上勾选需要的数据项，然后点击确认按钮进行选择。