使用el-checkbox实现列表多选、全选、取消全选、单个选择、全选时取消单个选择对多选状态改变功能

实现列表多选、单个选择和取消单个选择可以通过为每个列表项绑定一个v-model来实现。而全选和取消全选可以通过一个全选的checkbox来实现，同时需要用一个变量来保存当前的多选状态。

假设你的数据是一个数组，每个元素都有一个id和一个name属性，代码如下：

<template>
  <div>
    <el-checkbox v-model="isAllSelected" @change="handleSelectAll">{{ isAllSelected ? '取消全选' : '全选' }}</el-checkbox>
    <el-checkbox-group v-model="selected">
      <el-checkbox v-for="item in list" :key="item.id" :label="item.id" @change="handleSelectOne(item.id)">{{ item.name }}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'item 1' },
        { id: 2, name: 'item 2' },
        { id: 3, name: 'item 3' }
      ],
      selected: [],
      isAllSelected: false
    }
  },
  methods: {
    handleSelectAll(val) {
      if (val) {
        this.selected = this.list.map(item => item.id)
      } else {
        this.selected = []
      }
    },
    handleSelectOne(id) {
      if (this.selected.includes(id)) {
        this.selected.splice(this.selected.indexOf(id), 1)
      } else {
        this.selected.push(id)
      }
      this.isAllSelected = this.selected.length === this.list.length
    }
  }
}
</script>

在上面的代码中，我们首先定义了一个isAllSelected变量用来保存全选状态，同时为el-checkbox绑定了一个change事件来处理全选和取消全选的功能。handleSelectAll方法中，如果当前状态为选中，则将selected数组设置为所有数据的id，否则将selected数组清空。在handleSelectOne方法中，我们判断当前的id是否在selected数组中，如果是，则将其从数组中删除，否则将其添加到数组中。同时，我们还需要判断当前是否已经全选，如果是，则将isAllSelected设置为true，否则设置为false。

这样，我们就实现了列表多选、全选、取消全选、单个选择、全选时取消单个选择对多选状态改变功能。