用element ui的 Checkbox，做全选和取消全选

好的，你可以参考以下代码实现：

<template>
  <div>
    <el-checkbox v-model="isAllChecked" @change="handleAllCheckedChange">全选</el-checkbox>
    <div>
      <el-checkbox v-for="(item, index) in list" :key="item.id" v-model="item.checked" @change="handleItemCheckedChange(index)">{{ item.name }}</el-checkbox>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isAllChecked: false, // 是否全选
      list: [ // 数据列表
        { id: 1, name: '选项一', checked: false },
        { id: 2, name: '选项二', checked: false },
        { id: 3, name: '选项三', checked: false },
        { id: 4, name: '选项四', checked: false },
      ],
    }
  },
  methods: {
    // 全选/取消全选
    handleAllCheckedChange(val) {
      this.list.forEach(item => {
        item.checked = val
      })
    },
    // 某个选项状态改变
    handleItemCheckedChange(index) {
      const uncheckedItem = this.list.find(item => !item.checked)
      this.isAllChecked = !uncheckedItem // 判断是否全选
    },
  },
}
</script>

这里使用了 `el-checkbox` 组件来实现复选框，通过 `v-model` 双向绑定数据，`@change` 监听事件。全选和取消全选的操作是通过遍历数据列表，将所有选项的状态改为相同的值来实现的。当某个选项的状态改变时，会判断是否全选，如果有未选中的选项，则取消全选状态，否则设置全选状态。