官方的组件样式无法满足项目需求,所以手动实现了该组件的功能
在formData.typeIDList中存储选中的
html部分:
<span v-for="(item,index) in productList" :key="item.id">
<span v-if="(index+1)%6!==0" >
<Checkbox :value="isChoiced(item.id)" :label="item.id" @on-change="v=>{handleCheckBoxChange(v,item.id)}">
<span >{{item.type}}</span>
</Checkbox>
</span>
<span v-if="(index+1)%6===0" >
<Checkbox :value="isChoiced(item.id)" :label="item.id" @on-change="v=>{handleCheckBoxChange(v,item.id)}">
<span >{{item.type}}</span>
</Checkbox>
<br/>
</span>
</span>
js部分:
isChoiced (typeId) {
for (let i = 0; i < this.formData.typeIDList.length; i++) {
if (this.formData.typeIDList[i] === typeId) {
return true;
}
}
return false;
},
handleCheckBoxChange (v, typeId) {
// alert(v);
if (v) {
this.formData.typeIDList.push(typeId);
} else {
for (let i = 0; i < this.formData.typeIDList.length; i++) {
if (this.formData.typeIDList[i] === typeId) {
this.formData.typeIDList.splice(i, 1);
break;
}
}
}
this.$refs.editForm.validateField('typeIDList');
// alert(this.formData.typeIDList);
},