ElementUI el-checkbox实现全选反选单选

Posted 肖祥

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ElementUI el-checkbox实现全选反选单选相关的知识,希望对你有一定的参考价值。

一、概述

先来看一下效果图

 

需求:

1. 每一种类型,可以全选,反选(一个都不选),单选(仅选一个或者多个)

2. 保存时,至少有一种类型,选择1个或多个。不能都不选,直接提交空表单。

3. 保存时,提交参数都是id,不能出现中文。

 

初始页面数据如下:

[{
    "groupId": 1,
    "groupName": "运动",
    "checkAll": false,
    "ischeckAll": [],
    "interestList": [{
        "name": "篮球",
        "tasteId": 10
    }, {
        "name": "足球",
        "tasteId": 11
    }, {
        "name": "乒乓球",
        "tasteId": 12
    }]
}, {
    "groupId": 2,
    "groupName": "棋类",
    "checkAll": false,
    "ischeckAll": [],
    "interestList": [{
        "name": "军旗",
        "tasteId": 14
    }, {
        "name": "象棋",
        "tasteId": 15
    }, {
        "name": "五子棋",
        "tasteId": 16
    }]
}]

 

提交参数格式如下:

{
    "interestList": [{
        "groupId": 1,
        "itemList": []
    }, {
        "groupId": 2,
        "itemList": [14]
    }]
}

注意:itemList是具体某一项的id,比如:足球。

 

二、代码实现

test.vue

<template>
  <div style="width:800px;margin-left: 10px;margin-top: 10px">
    <div>
      <span class="big_title">兴趣爱好</span>
    </div>
    <div class="div_space"></div>
    <div v-for="(parent,index) in groupList" :key="index">
      <div>
        <div class="div_space" v-if="index!=0"></div>
        <div class="titles">{{ parent.groupName }}</div>
        <div>
          <el-checkbox v-model="parent.checkAll" @change="selectAllFunc(parent.groupId,parent.checkAll)"
                       style="float: left;padding-right: 20px">全选
          </el-checkbox>
          <el-checkbox-group v-model="parent.ischeckAll">
            <el-checkbox @change="setCheck(parent.groupId)" v-for="(item,index2) in parent.interestList"
                         :value="item.tasteId" :label="item.tasteId" :key="item.tasteId">{{item.name}}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
    </div>
    <div class="div_space"></div>
    <div>
      <button class="btn btn-primary" @click="form_validation()">保存</button>
      <button class="btn btn-cancel" style="margin-left: 5px;" >取消</button>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        groupList: [
          {
            groupId: 1,
            groupName: \'运动\',
            checkAll: false,
            ischeckAll: [],
            interestList: [
              {
                name: \'篮球\',
                tasteId: 10
              },
              {
                name: \'足球\',
                tasteId: 11
              },
              {
                name: \'乒乓球\',
                tasteId: 12
              }
            ],
          },
          {
            groupId: 2,
            groupName: \'棋类\',
            checkAll: false,
            ischeckAll: [],
            interestList: [
              {
                name: \'军旗\',
                tasteId: 14
              },
              {
                name: \'象棋\',
                tasteId: 15
              },
              {
                name: \'五子棋\',
                tasteId: 16
              }
            ],
          }
        ],
        params: {
          interestList:[]
        },
        // groupList: [],  // 所有电梯列表
      }
    },
    mounted() {
      //
      console.log("初始数据",JSON.stringify(this.groupList))
    },
    methods: {
      // 勾选全选动作
      selectAllFunc(id, checkAll) {
        // console.log("执行selectAllFunc", id, checkAll)
        // 遍历列表
        for (let val of this.groupList) {
          // 判断groupId
          if (val.groupId == id) {
            // 判断全选,如果checkAll为true,则遍历interestList,将tasteId填充到ischeckAll中
            // 否则为为空列表,注意:为空时,表示反选。
            val.ischeckAll = checkAll ? val.interestList.map(item => item.tasteId) : []
            // console.log("ischeckAll", val.ischeckAll)
          }
        }
        // console.log(this.groupList)
      },
      // 设置全选状态
      setCheck(id) {
        // console.log("执行setCheck", id)
        for (let val of this.groupList) {
          if (val.groupId == id) {
            // 判断已经选中的列表是否和选项列表数量一致,如果一致为true,否则为false
            val.checkAll = val.ischeckAll.length == val.interestList.length ? true : false
          }
        }
      },
      // 验证表单
      form_validation() {
        // 设置提交参数列表,遍历groupList,组合新的对象
        this.params.interestList = this.groupList.map(item => {
          return {
            groupId: item.groupId,
            itemList: item.ischeckAll
          }
        })
        // console.log(this.params.interestList)
        // 选择标志位
        let select_flag = false
        // 遍历提交参数列表
        for (let val of this.params.interestList) {
          // 判断列表长度,只要其中一组选择了,标准为true
          if (val.itemList.length > 0) {
            select_flag = true
          }
        }
        // 判断兴趣爱好至少选一个
        if (select_flag == false) {
          this.$message.error("兴趣爱好至少选一个")
          return false
        }
        // return false
        this.submit()
      },
      submit(){
        console.log("提交参数",JSON.stringify(this.params))
      }
    }
  }
</script>
<style scoped>
  .big_title {
    width: 172px;
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 550;
    color: #333333;
    line-height: 22px;
  }

  .div_space {
    height: 15px;
  }
</style>

 

效果如下:

 

注意:当选择的选项都选中时,会自动勾选全选,否则不勾选。

 

以上是关于ElementUI el-checkbox实现全选反选单选的主要内容,如果未能解决你的问题,请参考以下文章

ElementUI中el-checkbox使用v-model绑定默认选中

ElementUI多选框组件

elementUI+JS实现全选与反选

elementui 单个checkbox数据回显

elementui 单个checkbox数据回显

vue.js + elementUI实现动态渲染折叠面板,以及里面的CheckBox全选