element-ui复选框el-checkbox包含单选框el-radio

时间：2025-01-19 16:40:12

先上效果

第一步：html

 

          <div class="table-title">
            <el-checkbox
              :indeterminate="rwisIndeterminate"
              v-model="rwcheckAll"
              @change="rwhandleCheckAll"
            >全选</el-checkbox>
          </div>
          <div v-loading="rwloading" style="min-height: 180px;">
            <div v-for="(item,index) in RW" :key="index">
              <el-checkbox-group
                class="email-checkbox"
                v-model="checkedRw"
                @change="handleCheckedrwChange"
              >
                <el-checkbox
                  @change="rwhandleSingleCheck($event, , item)"
                  style="display: block;text-align: left;"
                  :label=""
                  :key=""
                >{{  }}</el-checkbox>
                <el-radio-group v-model="rwradio[index][]">
                  <el-radio
                    style="margin-left: 20px;"
                    v-for="radioitem in  "
                    :key=""
                    :label=""
                    @change="radiochange(radioitem, )"
                  >版本{{  }}(有效监控企业{{  }}家)</el-radio>
                </el-radio-group>
              </el-checkbox-group>
            </div>

方便大家知道遍历的到底是什么数据，我把后端回来的数据展示一下，仅供参考

 

第二步：CSS（每个需求的样式都不同，提供的样式仅供参考）

   .table-title {
     width: 100%;
     height: 40px;
     padding: 10px;
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
     text-align: left;
   }
   .email-checkbox {
     padding: 20px 0 0 20px;
     text-align: left;

     .el-checkbox {
       width: 33.33%;
       margin: 10px 0 10px;
     }
   }

第三步：JS

首先在data中声明必要的变量

  data() {
    return {
      rwradio: [],//单选框组绑定的数据
      rwisIndeterminate: false,//控制全选样式
      rwcheckAll: false,//全选
      checkedRw: [],//当前分页选中的任务
      allrwPageChecked: null, // 所有选中的任务
      RW: [],//接口返回来的总数组
      rwloading: false,//数据未加载完毕时，展示加载中的效果
    }
  },

接下来就是实现功能啦

功能一：初始化页面的展示

    getrwList() {
       = true
      ('地址', 请求参数).then(res => {
         = 
        //单选框组因为是遍历渲染的，所以必须是数组格式，不能是对象或者简单类型
        //reduce方法在这里不过多说明，大家自行了解
         = ((ary, item, index) => {
          const obj = {}
          //初始设置单选框组每个绑定的都为0，单选框绑定的是taskId，所以都是0的话，对应不上，单选框肯定是不会有选中效果的。
          obj[] = 0
           //如果有勾选，一般是查看效果时，进行回显，是有数据的（数据格式与后端返回数据结构一致，请参考上方），那么此时再把单选框重新赋值对应的taskId。此时可以对应啦，那么单选框就回有选中的效果。
          if () {
            (i => {
              if ( == ) {
                obj[] = [0].taskId
              }
            })
          }
          (obj)
          return ary
        }, [])
         //这里是形成一个复选框绑定的数组，后续的方法会用到
         = ((ary, item) => {
          ()
          return ary
        }, [])
        ()
      })
       = false
    },
//value就是在getrwList（）方法中传递过来的复选框的数组
    initrwPageChecked(value) {
      let checked = [];
       //筛选已勾选的taskName，并添加到一个空数组中（ checked），
      if () {
        (item => {
          (i => {
            if (()) {
              ()
            }
          })
        })
      }
       //(new Set(checked))是对checked进行去重，并赋值给复选框组所绑定的checkedRw
       = (new Set(checked))
//以下请查看element-ui的官方网站，都是固定的写法
      let checkedCount = 
       = checkedCount === 
       = checkedCount > 0 && checkedCount < 
    },

功能二：全选

    rwhandleCheckAll(val) {
//val返回的是true/false
//如果全选
      if (val) {
//复选框绑定的值等于初始化页面时获取到的所有（如果不记得了，请看功能一）
         = 
//代表已选中的，那么它就把初始化页面获取到的所有都添加进去
        (item => {
          (item)
        })
//3.对进行数组复杂类型的去重
        let allrwPageCheckedobj = {}
         = ((ary, item) => {
          allrwPageCheckedobj[] ? '' : allrwPageCheckedobj[] = true && (item)
          return ary
        }, [])
//单选框组此时就不能赋值为0了，而是直接赋值（我这里时默认选第一条数据，所以绑定的是versionList[0]）
         = ((ary, item, index) => {
          const obj = {}
          obj[] = [0].taskId
          (obj)
          return ary
        }, [])
      } 
//如果取消全选
else {
//复选框为空数组
         = [];
//重新赋值为，不包含初始化页面获取到的所有
        (item => {
           = ((ary, i) => {
            if ( != ) {
              (i)
            }
            return ary
          }, [])
        });
//单选框组再次全部赋值为0
         = ((ary, item, index) => {
          const obj = {}
          obj[] = 0
          (obj)
          return ary
        }, [])
      }
//4.这个必须加上控制全选按钮的样式
       = false
    },

功能三：复选框组的勾选控制全选按钮

handleCheckedrwChange(value) {
//直接看官方文档
      let checkedCount = 
       = checkedCount === 
       = checkedCount > 0 && checkedCount < 
    },

功能四：复选框单独选中/取消

//val:是否勾选；rw:复选框的名称;rwobj:单个复选框包含的所有数据
    rwhandleSingleCheck(val, rw, rwobj) {
//如果勾选
      if (val) {
//代表已勾选的数组，把rwobj添加进去
        (rwobj)
//进行去重
        let allrwPageCheckedobj = {}
         = ((ary, item) => {
          allrwPageCheckedobj[] ? '' : allrwPageCheckedobj[] = true && (item)
          return ary
        }, [])
//3. 单选框组对应的数据赋值为正确的值而非0
        (item => {
          if ( == rw) {
            (i => {
              i[rw] = [0].taskId
            })
          }
        })
      } 
//如果取消勾选
else {
//通过indexOf方法，找到对应的索引值，在通过splice方法，进行删除
        (item => {
          if ( == ) {
            ((item), 1)
          }
        })
//单选框组对应的数据再次赋值为0
        (item => {
          item[rw] = 0
        })
      }
    },

功能五：单选框的取消切换

//obj:单选框的对象信息；name:单选框对应的多选框的名字，也就是taskname
    radiochange(obj, name) {
//1.创建一个所需要的格式
      let a = {
        taskName: name,
        versionList: [obj]
      }
//2.当多选框没有勾选的情况时，也就是直接选中而非进行单选框的切换
      if ((name) == -1) {
//2.1直接把a添加到已勾选的数组中，此时是没有重复项的，不需要去重
        (a)
      } 
//3.当多选框组已经勾选，是单选框组进行切换
else {
//3.1根据indexOf方法（从前往后找，找到就停下来，不再继续查找）找到taskName相等时，item对应的索引
//3.2根据splice方法，对数组进行替换
        (item => {
          if ( == name) {
            ((item), 1, a)
          }
        })
      }
//4.针对多选框组不存在数据进行添加
      if (!(name)) {
        (name)
      }
//5.控制全选按钮的样式，一定要写
       = true
    },

相关文章