手工实现iview的CheckBoxGroup组件功能

官方的组件样式无法满足项目需求,所以手动实现了该组件的功能

在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);
	  },

猜你喜欢

转载自blog.csdn.net/qq_41656943/article/details/87124312