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" οnerrοr="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、分析
- 在<el-checkbox>标签中要写 :label="xxx" ,否则在勾选时未加区分会导致全选。
- <el-button>标签中,"this.imgAttachmentId.length === 0" 判断是否有勾选项,若无则禁用删除键。
- 当有勾选项时,会将选中项的 "item.attachmentId" 存入this.imgAttachmentId。
- 打印如图:
3、效果图