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反选时,selectedItemsItemsselectedItems的补集,注意还要处理对象数组和字符串或数值数组的转换问题

你可能感兴趣的:(前端,Vue,ElementUI,elementui,vue)