Checkbox 多选框（element UI）

需求：

• 点击全选时全部勾选
• 点击清空全部清空
• 可以单独勾选、清除勾选
• 显示时保存名字，保存是保存对应的id
  

注意点：

• 绑定的数组，数组的值是label的值。当勾选时被勾选的lable会被添加到数组中，清空时，该label值会从数组中移出

<el-checkbox-group v-model="checkList">
    <el-checkbox label="复选框 A"></el-checkbox>
    <el-checkbox label="复选框 B"></el-checkbox>
    <el-checkbox label="复选框 C"></el-checkbox>
</el-checkbox-group>
checkList: ['复选框 A']

• 如果在标签内部填写内容时，显示的值会被替换。以复选框A为例，显示时显示复选框A，保存时A会被添加到数组中

<el-checkbox-group v-model="checkList">
    <el-checkbox label="A">复选框A </el-checkbox>
    <el-checkbox label="B">复选框B </el-checkbox>
</el-checkbox-group>

实现

<el-button-group>
     <el-button type="primary" size="mini" style="margin-right:5px;" @click="handleOutCheck(true)">全选</el-button>
     <el-button type="primary" size="mini" @click="handleOutCheck(false)">清空</el-button>
 </el-button-group>
 <el-checkbox-group v-model="form.checkOutValueList">
     <el-checkbox v-for="item in outWarehouseList" :key="item.id" :label="item.id">{{ item.codeName }}</el-checkbox>
 </el-checkbox-group>

// 处理出库类型全选、清空
 handleOutCheck(type) {
     // type为true标识全选，false表示清空
     if(type) {
         // 使多选框被勾选
         this.form.checkOutValueList = this.outWarehouseList.map(e => e.id);
     }else{
         this.form.checkOutValueList = [];
     }
 },