(vue)Checkbox 多选框添加全选项

(vue)Checkbox 多选框添加全选项

效果：

html：

<el-form-item label="工单状态：">
  <el-checkbox
    :indeterminate="isIndeterminate"  //选框状态
    v-model="checkAll"
    @change="handleCheckAllChange"
    >全选</el-checkbox
  >
  <div style="margin: 15px 0"></div>
  <el-checkbox-group
    v-model="searchData.workOrderStatusList" //绑定字段
    @change="handleCheckedCitiesChange"
  >
    <el-checkbox
      v-for="item in statusList"  //选项数组
      :key="'ss' + item.key"
      :label="item.key"
      >{{ item.value }}</el-checkbox
    >
  </el-checkbox-group>
</el-form-item>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

data中定义所需变量：

//全选按钮
checkAll: false,
isIndeterminate: false,
1
2
3

方法：

handleCheckAllChange(val) {
  let statusListId = [];
  this.statusList.forEach((item) => {
    statusListId.push(item.key); //所有选项id数组[1, 2, 3, 4, 5, 6, 7, 8, 9]
  });
  this.searchData.workOrderStatusList = val ? statusListId : [];
  this.isIndeterminate = false;
},
handleCheckedCitiesChange(value) {
  let checkedCount = value.length;
  this.checkAll = checkedCount === this.statusList.length;
  this.isIndeterminate =
    checkedCount > 0 && checkedCount < this.statusList.length;
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14