手工实现iview的CheckBoxGroup组件功能

最新推荐文章于 2024-08-16 14:48:10 发布

码农老牛

最新推荐文章于 2024-08-16 14:48:10 发布

阅读量3.2k

点赞数

分类专栏： iview

本文链接：https://blog.csdn.net/qq_41656943/article/details/87124312

版权

iview 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

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