vue checkbox-group的全选和反选

场景

界面截图

2021-09-24_094640.png

界面代码

<template>
  <el-dialog
      :title="!dataForm.id ? '新增' : '修改'"
      :close-on-click-modal="false"
      :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
             label-width="80px">
      <!--    <el-form-item label="创建人" prop="createdBy">
            <el-input v-model="dataForm.createdBy" placeholder="创建人"></el-input>
          </el-form-item>
          <el-form-item label="创建时间" prop="createdTime">
            <el-input v-model="dataForm.createdTime" placeholder="创建时间"></el-input>
          </el-form-item>
          <el-form-item label="更新人" prop="updatedBy">
            <el-input v-model="dataForm.updatedBy" placeholder="更新人"></el-input>
          </el-form-item>
          <el-form-item label="更新时间" prop="updatedTime">
            <el-input v-model="dataForm.updatedTime" placeholder="更新时间"></el-input>
          </el-form-item>-->
      <el-form-item label="名称" prop="sysName">
        <el-input v-model="dataForm.sysName" placeholder="名称" maxlength="20" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="图标" prop="img">
        <!--      <el-input v-model="dataForm.img" placeholder="图标"></el-input>-->
        <el-upload
            :accept="acceptMimeC"
            class="avatar-uploader"
            :http-request="request"
            action="normal"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
          <img v-if="dataForm.imgShow" :src="dataForm.imgShow" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="推送分组">
        <el-checkbox @change="pushGroupCheckAll">全选</el-checkbox>
        <el-checkbox-group v-model="dataForm.groupIds">
          <el-checkbox v-for="group in groupList" :key="group.id" :label="group.id">{{
              group.groupName
            }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="推送用户">
        <el-checkbox @change="pushUserCheckAll">全选</el-checkbox>
        <el-checkbox-group v-model="dataForm.userIds">
          <el-checkbox v-for="user in userList" :key="user.id" :label="user.id">{{
              user.username
            }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

在界面中有推送分组和推送2组数据，分别可以多选。使用el-checkbox-group可以完成这个操作，其中el-checkbox中的groupList和userList分别为2组数据的数据源，数据源中都有id属性用来做checkbox选中记录的key，分别有group.groupName和user.username属性来用来在界面中checkbox的显示。这个很容易理解，以此界面为例在推送分组为例，当我们选中A分组时，界面看起来是选中的A，实际上在代码中记录的是A选项对应的id属性。
el-checkbox-group绑定的数据dataForm.groupIds和dataForm.userIds是界面数据中用来记录用户选中的选项列表，其实就是选中数据源的id属性。

界面中data属性代码：data中包含dataForm结构和2个el-checkbox-group中checkbox绑定的数据源，el-checkbox-group绑定的是dataForm中的userIds和groupIds。在这里贴出来主要是让大家看一下数据的定义。其中userList和groupList是数据源，也就是界面中checkbox中数据选项的数据。dataForm.userIds和dataForm.groupIds是用户所选中的数据。

data() {
    return {
      visible: false,
      dataForm: {
        id: 0,
        createdBy: '',
        createdTime: '',
        updatedBy: '',
        updatedTime: '',
        sysName: '',
        img: '',
        sign: '',
        imgShow: '',
        userIds: [],
        groupIds: []
      },
      acceptMime: [".jpg", ".png", ".jpeg"],
      userList: [],
      groupList: []
    }
  }

使用el-checkbox-group可以很快完成这个多选功能，但是一般在这种场景下需要全选的机制，也就是点击全选，再点击就全部反选。

解决方案

在这里全选和反选很显然与界面中的2个el-checkbox-group无关，需要从外部控制。所以分别在2个el-checkbox-group上面各添加了一个checkbox，分别用来控制2个el-checkbox-group的数据全选和反选。因为2个机制是一模一样的，所以在下文记录中使用推送用户的全选和反选来记录，推送分组的全选和反选是一样的，只是操作中的数据源不一样。

checkbox的选中状态可以使用@change="pushUserCheckAll"的写法来监测，定义pushUserCheckAll(checkAll)函数。函数中有一个参数，这个参数表示checkbox的选中状态，在使用checkbox绑定@change事件函数时也不需要传进去，系统回调该函数时自己传进去的，在函数中直接使用就行。

• checkbox选中时：全选。遍历推送用户的数据源userList，遍历的每一条数据的id都添加到dataForm.userIds数据中，因为dataForm.userIds与el-checkbox-group是绑定的，所以只要我们操作dataForm.userIds的数据内容界面就会自动渲染界面上的选项列表为全选状态。在这里添加数据时需要先判断一下，如果这个数据已经存在就不要再添加了，因为有可能你在已经选中了某几个数据的情况下再点击的全选，此时dataForm.userIds中已经有某几个数据了，再添加一次的话数据会重复，虽然数据重复对于界面显示上没有影响，但是这样总是不好的，假如你把数据传给后台，对方也没有处理这种事情呢？虽然bug总是有的，但是眼前的bug就不要放过了。
• checkbox未选中时：全反选。将dataForm.userIds的数据置为空数组[]。

<el-checkbox @change="pushUserCheckAll">全选</el-checkbox>

pushUserCheckAll(checkAll) {
  if (checkAll) {
    this.userList.forEach(value => {
      if (this.dataForm.userIds.indexOf(value.id) < 0) {
        this.dataForm.userIds.push(value.id);
      }
    })
  } else {
    this.dataForm.userIds = [];
  }
}

问题

按照上文的方式完成数据的全选和反选，并且在数据回显时也能体现出来。在使用过程中如果我点击全选，所有数据项和全选按钮都会是选中状态，这个应该这样，但此时我如果反选掉其中一个数据项，此时应该该项是反选状态，并且全选按钮也是反选状态，但是上文的做法并不能关联到全选按钮。这个全选按钮只能控制数据源的全选和反选，但是并不能通过数据源的选中量来控制全选按钮的选中状态。这个问题只是界面显示的一个作用，对于操作数据没有影响，所以仍然可以用，后面有时间再研究。估计就是添加一个数据项的选中监测机制，通过判断选中的项和数据源进行对比，如果是选中了所有数据源就控制全选按钮为选中，反之就是未选中。