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>

 

效果如下：

 

注意：當選擇的選項都選中時，會自動勾選全選，否則不勾選。