element ui Checkbox 多选框实现全选效果

效果如下：

image.png image.png

源码：

<el-form-item label="订单状态">
          <div style="display:flex;">
            <div style="margin-right:20px">
              <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
            </div>
            <el-checkbox-group v-model="exportForm.order_status" @change="handleCheckedCitiesChange">
              <el-checkbox v-for="(item,index) in statusTree" :key="index" :value="item.id" :label="item.id">{{ item.label }}</el-checkbox>
            </el-checkbox-group>
          </div>
  </el-form-item>

return {
  exportForm:{
    order_status:[]
  }
  isIndeterminate: false,
  checkAll: false,
  statusTree: [
        {
          id: 0,
          label: '待订单审核'
        },
        {
          id: 1,
          label: '待财务审核'
        },
        {
          id: 2,
          label: '待发货审核'
        },
        {
          id: 3,
          label: '待收货'
        },
        {
          id: 4,
          label: '已完成'
        },
        {
          id: 5,
          label: '已作废'
        }
     ],
}

methods:{
  handleCheckAllChange(val) {
      const all = this.statusTree.map(item => {
        return item.id
      })
      this.exportForm.order_status = val ? all : []
      this.isIndeterminate = false
      console.log(this.exportForm.order_status)
    },
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.statusTree.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.statusTree.length
    },
}