vue基于element-ui的三级CheckBox复选框功能的实现代码.zip

vue基于基于element-ui的三级的三级CheckBox复选框功能的实现代码复选框功能的实现代码

最近vue项目需要用到三级CheckBox复选框，需要实现全选反选不确定三种状态。但是element-ui table只支持多选行，并不能支持三级及以上的多

选，下面通过本文给大家讲解实现方法。

效果图预览：

首先是页面布局，当然也可已使用table，但是自己用flex布局后面更容易增删改查其他功能

<div class="deliverySetting-table">

<div class="table-head">

<div class="selection">

<div class="table-body" v-for="(partition,partitionIndex) in distributorsInfo" :key="partitionIndex">

<div class="selection">

<p><el-checkbox :indeterminate="partition.indeterminate" v-model="partition.selected" @change="handleCheckedCountryAllChange(partitionIndex,partition.partitionId,$event)"

:key="partitionIndex"></el-checkbox></p>

</div>

<div class="width185"><p>{{ partition.partitionName }}</p></div>

<div class="width265">

<el-checkbox v-for="country in partition.country" v-model="country.selected" @change="handleCheckedCountryChange(partitionIndex,country.id,partition.partitionId,$event)"

:label="country" :key="country.id">{{country.fieldName}}</el-checkbox>

</div>

</div>

接下来是数据结构，自定义的，可以更后台商议，但是字段indeterminate（显示不确定状态~符号），selected（CheckBox选中状态）一定要让后台

加入到data中，其他可以按照后台数据来。

distributorsInfo:[

{ partitionName:'1区',selected:false,partitionId:1,isIndeterminate:false,

country:[

{ id: "1",fieldName: "奥地利",fieldTableName: "奥地利",distributors:'UPS',selected: false},

{ id: "2",fieldName: "芬兰",fieldTableName: "芬兰",distributors:'UPS',selected: false},

{ id: "3",fieldName: "意大利",fieldTableName: "意大利",distributors:'UPS',selected: false},

{ id: "4",fieldName: "葡萄牙",fieldTableName: "葡萄牙",distributors:'UPS',selected: false},

{ partitionName:'3区',selected:false,partitionId:3,isIndeterminate:false,

country:[

{ id: "7",fieldName: "德国",fieldTableName: "德国",distributors:'YODEL',selected: false},

{ id: "8",fieldName: "瑞士",fieldTableName: "瑞士",distributors:'DPD',selected: false}] }

],

ischeckAll:false,//一级全选状态

因为此处是三级复选，所以函数为三个change，具体有详细注释可以查看

handleCheckAllChange(e){//一级change事件

this.ischeckAll = e

if(e == true){

for(var i=0,len=this.distributorsInfo.length; i<len; i++){ //二级全选反选不确定

}else{

this.indeterminate = false

for(var i=0,len=this.distributorsInfo.length; i<len; i++){ //三级全选反选不确定

this.distributorsInfo[i].selected = e

for(var j=0,len1=this.distributorsInfo[i].country.length; j<len1; j++){

this.distributorsInfo[i].country[j].selected = e

}

}

}

},

childrenArray[i].selected = e

this.getIsCheckAll()

},

handleCheckedCountryChange(topIndex, sonId, topId, e){//三级change事件

var childrenArray = this.distributorsInfo[topIndex].country

var tickCount = 0, unTickCount = 0, len = childrenArray.length

for(var i = 0; i < len; i++){

if(sonId == childrenArray[i].id) childrenArray[i].selected = e

if(childrenArray[i].selected == true) tickCount++

if(childrenArray[i].selected == false) unTickCount++

} else if(unTickCount == len) {//三级级全不勾选

} else {

this.distributorsInfo[topIndex].selected = false

this.distributorsInfo[topIndex].indeterminate = true //添加二级不确定状态

}

this.getIsCheckAll()

},

getIsCheckAll(){

var tickCount = 0, unTickCount = 0, ArrLength = this.distributorsInfo.length

for(var j=0; j<ArrLength; j++){//全选checkbox状态

if(this.distributorsInfo[j].selected == true) tickCount++

this.indeterminate = false

} else {

this.ischeckAll = false

this.indeterminate = true //添加一级不确定状态

}

},

以下是页面完整组件代码可以使用预览

<template>

<div class="deliverySetting">

<div class="deliverySetting-btn">

</div>

<div class="deliverySetting-table">

<div class="table-head">

<div class="selection">

<el-checkbox :indeterminate="indeterminate" v-model="ischeckAll" @change="handleCheckAllChange"></el-checkbox>

</div>

<div class="width185">分区名称</div>

<div class="width265">国家</div>

<div>派送商</div>