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

2024-04-02 19:04:59 381人浏览独家记忆

摘要

目录单行删除与批量删除一、单行删除二、批量删除简单的批量删除,全选删除单行删除与批量删除一、单行删除 <el-table-column align="center" fix

单行删除与批量删除

一、单行删除

<el-table-column align="center" fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" size="small" icon="el-icon-edit"></el-button>
            <el-button
              @click="handleClick(scope.row)"
              type="text"
              size="small"
              icon="el-icon-delete"
            ></el-button>
          </template>
</el-table-column>

在对应的删除按钮添加事件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 = [];
    },
}

二、批量删除

<el-button @click="batchDeleteBuild(multipleSection)" plain>批量删除</el-button>

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 = [];
    },
}

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习：用户管理</title>
		<link rel="stylesheet" type="text/CSS" href="css/bootstrap.min.css"/>
		<script src="js/Jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="container">
			<h2>添加用户</h2>
			<fORM action="" class="form-horizontal">
				<div class="form-group">
					<label for="name" class="control-label col-sm-2 col-sm-offset-2">姓名：</label>
					<div class="col-sm-6">
						<input type="text" class="form-control" id="name" v-model="user.name" placeholder="输入姓名">
					</div>
				</div>
				<div class="form-group">
					<label for="age" class="control-label col-sm-2 col-sm-offset-2">姓名：</label>
					<div class="col-sm-6">
						<input type="text" class="form-control" id="age" v-model="user.age" placeholder="输入年龄">
					</div>
				</div>
				<div class="form-group">
					<label for="email" class="control-label col-sm-2 col-sm-offset-2">姓名：</label>
					<div class="col-sm-6">
						<input type="text" class="form-control" id="email" v-model="user.email" placeholder="输入邮箱">
					</div>
				</div>
				<div class="form-group text-center">
					<input type="button" value="添加" @click="addUser" class="btn btn-primary"/>
					<input type="reset" value="重置" class="btn btn-primary"/>
				</div>
			</form>
			<hr >
			<table class="table table-bordered table-hover">
				<caption class="h3 text-center text-info">用户列表</caption>
				<thead>
					<tr>
						<th class="text-center">多选</th>
						<th class="text-center">序号</th>
						<th class="text-center">姓名</th>
						<th class="text-center">年龄</th>
						<th class="text-center">邮箱</th>
						<th class="text-center">操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(user,index) in users">
						<td class="text-center">
							<input type="checkbox" :value="index" v-model="selectArr">
						</td>
						<td class="text-center">{{index+1}}</td>
						<td class="text-center">{{user.name}}</td>
						<td class="text-center">{{user.age}}</td>
						<td class="text-center">{{user.email}}</td>
						<td class="text-center">
							<button class="btn btn-danger" @click="deleteOne(index)">删除</button>
						</td>
					</tr>
					<tr>
						<td colspan="6" class="text-right">
							{{selectArr}}
							<input type="checkbox" class='checkbox' @click="selectAll">
							<button @click="deleteSel" type="button" class="btn btn-danger">批量删除</button>
							<button @click="deleteAll" type="button" class="btn btn-danger">删除所有</button>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<script src="js/vue.js"></script>
		<script>
			let vm = new Vue({
				el:".container",
				data:{
					users:[
						{name:'Lee',age:26,email:'lee@gmail.com'},
						{name:'Jay',age:40,email:'jay@gmail.com'}
					],
					user:{},
					selectArr:[]
				},
				methods:{
					addUser:function(){//添加用户
						if(this.user) {
							this.users.push(this.user);
							this.user = {};
						}	
					},
					deleteAll(){//全部删除
						this.users = []
					},
					deleteOne(index){//删除指定栏目
						this.users.splice(index,1)
					},
					deleteSel(){//选择删除
						let arr = [];
						var len = this.users.length;
						for(let i = 0;i<len;i++) {
							if (this.selectArr.indexOf(i) >=0 ) {
								console.log(this.selectArr.indexOf(i));
							}else{
								arr.push(this.users[i]);
							}
						}
						this.users = arr;
						this.selectArr = [];
					},
					selectAll(event){//全选
						// console.log(event);
						var _this = this;
						// console.log(event.currentTarget);
						if(!event.currentTarget.checked) {
							this.selectArr = [];
						}else{
							this.selectArr = [];
							
							// this.users.forEach(function(item,i) {
							// 	_this.selectArr.push(i)
							// })
							this.users.forEach((item,i)=>{
								this.selectArr.push(i)
							})
						}
					}
				}
			});
		</script>
	</body>
</html>