ElementUI Checkbox 多選框

一、概述

因項目需求，需要做一個多選設置。

先來看一下官方的demo

test.vue

<template>
  <div>
    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全選</el-checkbox>
    <div style="margin: 15px 0;"></div>
    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
      <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>
<script>
  const cityOptions = ['上海', '北京', '廣州', '深圳'];
  export default {
    data() {
      return {
        checkAll: false,
        checkedCities: ['上海', '北京'],
        cities: cityOptions,
        isIndeterminate: true
      };
    },
    methods: {
      handleCheckAllChange(val) {
        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      }
    }
  };
</script>

 

效果如下：

 

 

indeterminate 屬性用以表示 checkbox 的不確定狀態，一般用於實現全選的效果。

當indeterminate為true時，會出現減號，表示不是全選。為false，會出現對勾，表示全選。

全選的標簽用的是el-checkbox，v-model綁定的值是布爾值。

el-checkbox-group標簽中，v-model綁定的值是數組，數組里面就是綁定的label的值。

 

二、項目演示

注意：在官方的demo中，使用的基礎數據是：['上海', '北京', '廣州', '深圳']

發現沒有，它的數據機構很簡單，在實際項目中，其實數據會比它復雜一點，比如：

[
    {
      id:1,
      name:'上海',
      checkAll:false,
      isIndeterminate:false,
      checkedCities:[],
      children:[
        {
          parentId:1,
          id:2,
          name:'松江區',
        },
        {
          parentId:1,
          id:3,
          name:'楊浦區區',
        },
      ]
    },
    {
      id:10,
      name:'武漢',
      checkAll:false,
      isIndeterminate:false,
      checkedCities:[],
      children:[
        {
          parentId:10,
          id:11,
          name:'漢陽區',
        },
        {
          parentId:10,
          id:12,
          name:'武昌區',
        },
      ]
    }
  ]

 

test.vue

<template>
  <div>
    <div class="area-list" style="overflow:hidden" v-for="(item,index) in cities" :label="item.id"
         :key="item.id">
      <el-checkbox :indeterminate="item.isIndeterminate" v-model="item.checkAll"
                   @change="handleCheckAllChange($event,item)">{{item.name}}
      </el-checkbox>
      <el-checkbox-group v-model="item.checkedCities" class="a-row" @change="handleCheckedCitiesChange($event,item)">
        <el-checkbox v-for="(item2,index2) in item.children"
                     :label="item2.id"
                     :key="item2.id">
          <div>{{item2.name}}</div>
        </el-checkbox>
      </el-checkbox-group>
    </div>
    <div>
      當前選擇的是：{{option}}
    </div>
  </div>
</template>
<script>
  const cityOptions = [
    {
      id:1,
      name:'上海',
      checkAll:false,
      isIndeterminate:false,
      checkedCities:[],
      children:[
        {
          parentId:1,
          id:2,
          name:'松江區',
        },
        {
          parentId:1,
          id:3,
          name:'楊浦區區',
        },
      ]
    },
    {
      id:10,
      name:'武漢',
      checkAll:false,
      isIndeterminate:false,
      checkedCities:[],
      children:[
        {
          parentId:10,
          id:11,
          name:'漢陽區',
        },
        {
          parentId:10,
          id:12,
          name:'武昌區',
        },
      ]
    }
  ];
  export default {
    data() {
      return {
        checkAll: false,
        checkedCities: [],
        cities: cityOptions,
        isIndeterminate: true,
        option:[],
      };
    },
    methods: {
      // 勾選一級菜單時
      handleCheckAllChange(val,item) {
        // console.log("handleCheckAllChange",val)
        // console.log(item)
        // 判斷二級菜單數據不為空
        if(item.children&&item.children.length>0){
          // 如果勾選一級，則checkedCities填充所有二級的id，否則為空數組
          item.checkedCities=val?item.children.map(ele=>ele.id):[]
          // 固定狀態為false,操作一級菜單時，只有2種狀態，要么勾選，要么不不勾選，沒有半選狀態
          item.isIndeterminate =false
        }
        this.getOption()
      },
      // 勾選二級菜單時
      handleCheckedCitiesChange(value,item) {
        // 判斷二級菜單數據不為空，並且當前選中列表長度等於二級菜單長度
        if(item.children&&item.children.length>0&&value.length==item.children.length){
          // 設置全選為true，設置圖標為全選
          item.checkAll=true
          item.isIndeterminate = false
        } // 判斷二級菜單數據不為空，並且當前選中列表長度小於二級菜單長度，並且當前選中列表不為空
        else if(item.children&&item.children.length>0&&value.length<item.children.length&&value.length>0){
          // 設置全選為false，設置圖標為半選
          item.checkAll=false
          item.isIndeterminate = true
        }
        else{
          item.checkAll=false
          item.isIndeterminate = false
        }
        this.getOption()
      },
      // 獲取選擇的選項
      getOption(){
        this.option=[]
        for (let val of this.cities) {
          // console.log("val",val)
          // 一級菜單勾選時，則全部勾選二級菜單
          if(val.checkAll){
            this.option.push(val.id)
          }
          // 二級菜單有勾選時
          if(val.checkedCities&&val.checkedCities.length>0){
            // console.log("二級菜單有數據",val.checkedCities)
            // 加入一級菜單
            if(this.option.indexOf(val.id)==-1){
              this.option.push(val.id)
            }
            // 加入二級菜單勾選
            for (let val2 of val.checkedCities) {
              this.option.push(val2)
            }
          }
        }
        return this.option
      },
    }
  };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .area-list{
    margin-bottom: 13px;
    .el-checkbox{
      color: #333;
      font-size: 14px;
      width: 80px;
    }
  }
  .a-row{
    display: inline-block;
  }
</style>

 

效果如下：

 

注意：最左邊的是一級菜單，后面的都是二級菜單。當二級菜單，只有要1個選中，那么一級菜單就是半選狀態，非全選。

因此，提交表單參數時，也要將一級菜單的id提交過去才行。

 

 

本文參考鏈接：

https://element.eleme.cn/#/zh-CN/component/checkbox#jin-yong-zhuang-tai