CheckBox批量删除

vue+element CheckBox批量删除

1、html代码

<el-button type="warning" @click="delete(this.imgAttachmentId)" :disabled="this.imgAttachmentId.length === 0" icon="delete">删除</el-button>

<el-row>
<el-col :span="2" v-for="item in imgArr" >
	<el-card :body-style="{ padding: '0px' }">
	<img :src="item.path" onerror="this.src='lib/img/imgDef.png';" class="image-attachment">
	<el-checkbox  :label="item.attachmentId" :key="item.attachmentId" v-model="imgAttachmentId"></el-checkbox>
		         
	</el-card>
</el-col>
</el-row>

2、分析

1. 在<el-checkbox>标签中要写 :label="xxx" ,否则在勾选时未加区分会导致全选。
2. <el-button>标签中，"this.imgAttachmentId.length === 0" 判断是否有勾选项，若无则禁用删除键。
3. 当有勾选项时，会将选中项的 "item.attachmentId" 存入this.imgAttachmentId。
4. 打印如图：

3、效果图