基于vue的element组件Checkbox多选框【竖向多列】展示
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
需求: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
}
},
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45
5 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 5 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)