批量删除图片

 之前只做了删除单张图片，新增批量删除图片

<el-button style='' @click.native="deleteSelectedImages" type="warning" icon="search">
								批量删除<span v-if="selectedImages.length != 0">({{ selectedImages.length
									}})</span></el-button>

 因为按钮外层还有方法又是使用的组件按钮所以用@click.native阻止冒泡。避免影响到其他方法。使用el-checkbox组件，选择多选，定位在图片右上角，因为只想展示多选框所以lable绑定id,<span>标签展示图片id,但是隐藏标签。

<div class="text-p">{{ itemImage.name }}</div>
						<el-checkbox class="checkbox" v-model="selectedImages" :label="itemImage.id" size="large">
							<span style="display: none;">{{ itemImage.id }}</span>
						</el-checkbox>

<template>
    <li class="file_content_li" v-for="(itemImage, imageIndex) in imageListViewModel" :key="imageIndex" @click.stop="fromUpload(itemImage)" :class="{ 'textlihover': hoverIndex == imageIndex }">
	   <div class="matter_box">
		<div class="text-imgsbox" @click.stop="selectImage(itemImage, imageIndex)">
			<img :src=itemImage.path" />
			</div>
		 </div>
		<div class="text-p">{{ itemImage.name }}</div>
		<el-checkbox class="checkbox" v-model="selectedImages" :label="itemImage.id" size="large">
		<span style="display: none;">{{ itemImage.id }}</span>
	</el-checkbox>
	</li>
				
</template>

<script>
export default {
  data() {
    return {
      imageListViewModel：[],//图片列表
      selectedImages: []//多选选择图片id列表
    };
  },
  methods: {
   async deleteSelectedImages() {
			if (this.selectedImages.length === 0) {
				this.$message.error('请选择要删除的图片')
			} else {
				this.selectDelete(this.selectedImages)
			}
		},
  }
//图片批量删除
  selectDelete(arr) {
    this.$confirm('此操作将永久删除文件，是否继续？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
      .then(async () => {
//因为是后续加的批量删除，没有批量删除的接口，所以只能循环调用删除接口，如果有批量删除接口直接调用，传数组就好，不需要循环选中图片删除
        arr.forEach(async item => {
          var data = {
            id: item
          }
          var res = await this.httpDelete(
            '//后端接口',
            data,
            this.sTenant
          )
          if (res) {
           this.imageListViewModel = this.imageListViewModel.filter(r => r.id !== item)
            this.selectedImages = this.selectedImages.filter(itm => itm !== item)
          }
        })
        this.$message({
          message: '删除成功 ',
          type: 'success'
        })
      })
      .catch()
  },
};
</script>

以上，批量删除图片实现