基于vue的element组件Checkbox多选框【竖向多列】展示

需求：9个国家，每列展示5个，竖向排列

1、分列
对9个国家数组进行截取 handleCountrysList(num,countryList.length)，划分每列显示的数据

this.countryList=[
                    {cid:'1',cname:'中国'},
                    {cid:'2',cname:'美国'},
                    {cid:'3',cname:'法国'},
                    {cid:'4',cname:'意大利'},
                    {cid:'5',cname:'葡萄牙'},
                    {cid:'6',cname:'土耳其'},
                    {cid:'7',cname:'英国'},
                    {cid:'8',cname:'日本'},
                    {cid:'9',cname:'匈牙利'}
            ]

<template>
    <div class="groups">
        <div class="country-title">请选择{{max}}个国家</div>
        <el-checkbox-group 
            class="country-group"
            v-model="checkedCountries"
            :max="max"
            @change="changeHandele">
            <div class="country-group-cloumn" v-for="num in Math.ceil(countryList.length/columnnum)" :key="num">
                <el-checkbox class="country-group-item"  
                    v-for="country in handleCountrysList(num,countryList.length)" 
                    :label="country.cname" 
                    :key="country.cid">{{country.cname}}</el-checkbox>
            </div>
        </el-checkbox-group>
        <div class="checked-country">您当前选中的国家：{{checkedCountries.join(",")}}</div>
    </div>
</template>

// 处理数据，用于循环竖向显示
            handleCountrysList(num,lens){//从1开始
                let start=(num-1)*this.columnnum
                let end=num*this.columnnum>lens?lens:num*this.columnnum;
                return this.countryList.slice(start,end)
            },

2、竖向展示

.country-group{
    display: flex;
    justify-content: center;
    .country-group-cloumn{
        display: flex;
        flex-direction: column;
        margin: 0 20px;
        .country-group-item{
            margin: 4px 0;
        }
    }
}

3、实际开发中，我们需要把选中的数据传递给后台处理，对选中数据进行了处理，可以传id的数组或字符串形式

computed: {
            // 选中的数据优化集合
            checkdCountryObj:function(){
                let ids=[];
                if(this.checkedCountries.length>0){
                     this.checkedCountries.forEach(element => {
                        let result=this.countryList.filter(element2 => {
                            return element2.cname==element
                        });
                        ids.push(result[0].cid)
                    });
                }
                let resultObj={
                    checkedCountriesId:ids,//[3,4,1]
                    checkedCountriesIdStr:ids.join(","),//"3,4,1"
                    checkedCountries:this.checkedCountries,//["B3","B4","B1"]
                    checkedCountriesStr:this.checkedCountries.join(",")//"B3","B4","B1"
                }
                return resultObj
            }
        },

源码下载：https://download.youkuaiyun.com/download/LzzMandy/21389985