Vue实现单行删除与批量删除

目录

• 单行删除与批量删除
• 一、单行删除
• 二、批量删除
• 简单的批量删除,全选删除

单行删除与批量删除

一、单行删除

在对应的删除按钮添加事件scope.row保证选中当前行

export default {
  data() {
    const data = [];
    return {
          //删除记录的code
      deleteCode: []
    };
  },

methods: {
    //Table里的点击删除图标\
    async handleClick(row) {
      const confirmResult = await this.$confirm(
        "此操作将永久删除该文件, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).catch(err => err);
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消！");
      }
      this.deleteCode.push(row.id);
	   //调用的删除接口
      const { data: res } = await this.$axios.delete(
        "/questionCheck/updateIsDelete/" + this.deleteCode,
        {
          data: this.deleteCode
        }
      );
      if (res.code != "SUCCESS") {
        return this.$message.error("删除信息失败！");
      }
      this.deleteCode = [];
    },
}

二、批量删除

批量删除

export default {
  data() {
    return {
	      //被选中的列表记录
	    multipleSection: [],
       };
   },

methods: {
       //批量删除选中数据方法
    async batchDeleteBuild() {
      //判断是否选择了数据
      if (this.multipleSection.length == 0) {
        alert("请选择要删除的数据");
        return;
      }
      //如果有选中的数据，那么弹出消息框
      const confirmDelete = await this.$confirm(
        "此操作会永久删除建筑信息，是否删除？",
        "提示",
        {
          confimrButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).catch(err => err);
      //如果用户确认删除，则返回字符串confirm
      //如果用户取消删除，则返回字符串cancel
      if (confirmDelete !== "confirm") {
        return this.$message.info("已取消");
      }
      //将选中的数据推到deleteCode数组中
      for (var i = 0; i < this.multipleSection.length; i++) {
        var j = i;
        var id = this.multipleSection[j].id;
        this.deleteCode.push(id);
      }
      //删除deleteCode中的数据
      const { data: res } = await this.$axios.delete(
        "/question/DeleteQuestionBatch",
        {
          data: this.deleteCode
        }
      );
      if (res.code != "SUCCESS") {
        return this.$message.error("删除课程信息失败！");
      }
      this.deleteCode = [];
    },
}

简单的批量删除,全选删除

	
		
		
		
		
		
	
	
		

			
添加用户
			

				

					姓名：
					

						
					
				
				

					姓名：
					

						
					
				
				

					姓名：
					

						
					
				
				

					
					
				
			
			

			

				
用户列表
				

					

						
多选
						
序号
						
姓名
						
年龄
						
邮箱
						
操作
					
				
				

					

						

							
						
						
{{index+1}}
						
{{user.name}}
						
{{user.age}}
						
{{user.email}}
						

							删除
						
					
					

						

							{{selectArr}}
							
							批量删除
							删除所有
						
					
				
			
		
		
		
	

 

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。