场景

界面截图

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 = [];
  }
}

问题

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

Logo

前往低代码交流专区

更多推荐