vue+Element：checkbox的全选和反选

<el-radio-group v-model="selectRadio" @change="quickSelect">
  <el-radio :label="1">全选</el-radio>
  <el-radio :label="2">反选</el-radio>
</el-radio-group>

<el-checkbox-group v-model="selectedItems" @change="selectOption">
  <el-checkbox v-for="item in items" :label="item.value" :key="item.label">
    {{ item.label }}
  </el-checkbox>
</el-checkbox-group>

html中定义全选和反选选项，单选，选中值为selectRadio，选项变化时执行quickSelect方法，多选选项的选中值为selectedItems，选项变化时执行selectOption

selectOption() {
  if (this.selectedItems== this.items)
    this.selectRadio= 1
  else this.selectRadio= 0
},
quickSelect(value) {
  if (value == 1) {
    this.selectedItems= this.items.map(item => {
      return item.value
    })
  } else if (value == 2) {
    this.selectedItems= this.items.filter((item) => {
      return !this.selectedItems.includes(item.value)
    }).map(item => {
      return item.value
    })
  }
}

当多选选项选中值与选项相同，意味全部选中，满足全选条件，将快捷选项的全选勾选，同时，一旦出现选项变化，取消全选和反选的勾选，实现为selectOption。
quickSelect全选时，将Items的所有的选项有条件地赋予selectedItems，因为Items是对象数组，而selectedItems是字符串或数值数组(由checkbox的label类型决定)；
quickSelect反选时，selectedItems取Items对selectedItems的补集，注意还要处理对象数组和字符串或数值数组的转换问题