Vue实现批量选择操作（上下架，删除等）

在处理一些列表之类的数据时，经常会有一些批量处理的操作，以下仅以批量删除为例来做简单的分析，其主要代码如下：

<template>
	<el-button
	    size="small"
	    type="danger"
	    plain
	    @click="selectDeletePrize('08',prizeId)"
	    :disabled="prizeId.length == 0"
	    >批量删除</el-button 
	 > 
	<el-checkbox v-model="prizeId" :label="xxx">
	    <span v-if="xxx.length < 16">{{ xxx }}</span>
	    <el-tooltip
	    v-else
	    :content="xxx"
	    placement="top-start"
	    >
	    <span>{{ xxx.substring(0, 15) + "..." }}</span>
	    </el-tooltip>
	/*此处判断当xxx的长度超过16个字符时后面显示...(xxxx...)*/
	</el-checkbox>
</template>
export default {
	data() {
		return {
			prizeId: [],  //选中的编号
		}
	}，
	methods:{
		  //删除
	    deletePrize(PRIZE_STATUS, PRIZE_NO) {
	      this.$confirm("是否确认删除当前选中的奖品？", "警告", {
	        confirmButtonText: "确定",
	        cancelButtonText: "取消",
	        type: "warning",
	      }).then(() => {
	        prizeManage({   //此处为删除接口
	          PRIZE_STATUS: PRIZE_STATUS,
	          PRIZE_NO: PRIZE_NO,
	        }).then(() => {
	          this.$message("删除成功");
	          this.getPrizeList();  //此处为列表刷新的接口
	        });
	      });
	    },
	    //批量删除
	    selectDeletePrize(PRIZE_STATUS, prizeId) {
	      this.deletePrize(PRIZE_STATUS, prizeId.join(","))
	    },
	}
} 

批量操作主要是获取被选中的id，然后将选中的id传给后端接口即可。