vue基于element-ui的三级CheckBox复选框

最近vue项目需要用到三级CheckBox复选框，需要实现全选反选不确定三种状态。但是element-ui table只支持多选行，并不能支持三级及以上的多选，所以写了这篇技术博文供以后学习使用。

效果图预览：

 

首先是页面布局，当然也可以使用框架自带的table布局，这里博主自己用的flex布局，这样后面更利于增删改查其他功能

 

        

            

                

                    
                
                
分区名称
                
国家
                
派送商
            
            

                

                    

                
                
{
    { partition.partitionName }}
                

                    {
    {country.fieldName}}
                
                

                    

                        {
    { item.distributors }}
                    
                
           
        

接下来是数据结构，可以跟后端商议，但是字段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},
                        {   id: "9",fieldName: "西班牙",fieldTableName: "西班牙",distributors:'UPS',selected: false},
                        {   id: "10",fieldName: "瑞典",fieldTableName: "瑞典",distributors:'UPS',selected: false},]
                    },
                    { partitionName:'2区',selected:false,partitionId:2,isIndeterminate:false,
                        country:[
                        {   id: "5",fieldName: "丹麦",fieldTableName: "单买",distributors:'',selected: false},
                        {   id: "6",fieldName: "法国",fieldTableName: "法国",distributors:'',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
                this.indeterminate = false
                for(var i=0,len=this.distributorsInfo.length; i0){
                        this.indeterminate = true
                    }else{
                        this.indeterminate = false
                    }
                } else {
                    this.ischeckAll = false
                    this.indeterminate = true //添加一级不确定状态
                }
            },

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

好了，以后使用三级甚至多级复选都可以使用此方法添加change代码即可。