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

2024-10-30 04:04:20

单行删除与批量删除

一、单行删除

<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指向问题需要注意一下每一个用function声明的函数在调用时都会在函数内创建自己的this。
							**  this一般是函数所操作的对象。如果没有操作的对象。this在"use strict";严格模式下是 undefined，非严格模式下是 window。
							**	也就是说，function声明的函数总是有自己的this。从而遮盖外层作用域中的this。
							**	如果用es6的箭头函数()=>{}就没有自己的this。在箭头函数()=>{}中访问this，是访问外层作用域中的this
							*/
							// this.users.forEach(function(item,i) {
							// 	_this.selectArr.push(i)
							// })
							this.users.forEach((item,i)=>{
								this.selectArr.push(i)
							})
						}
					}
				}
			});
		</script>
	</body>
</html>

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

vue+element实现批量删除功能的示例

今年开始学习vue+element实现后台开发,在实现批量删除功能时有2个小知识点记录在下: 1.如何实现单击行交替选中当前行的复选框,element官网的table实例中没有找到.--通过row-click和toggleRowSelection实现 2.如何获取选中行的值来实现批量删除.--通过selection-change实现代码如下 html: <div class="row mt30 pl15"> <el-button type="warning
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作

1.表格动态添加,也可删除 <template> <div class="TestWord"> <el-button @click="addLine">添加行数</el-button> <el-button @click="save">保存</el-button> <el-table :data="tableData" style="wid
Vue实现单行删除与批量删除

目录单行删除与批量删除一.单行删除二.批量删除简单的批量删除,全选删除单行删除与批量删除一.单行删除 <el-table-column align="center" fixed="right" label="操作" width="100"> <template slot-scope="scope"> <el-button type="text"
thinkphp框架实现删除和批量删除

本文实例讲一下如何用thinkphp实现数据的删除和批量删除吧. 预期效果图: 原谅博主对照片的处理是如此的草率吧... 仍然是通过MVC模式进行拆分: 首先是视图部分: <form action="__MODULE__/Admin/User/del" method="get"> <tr> <th width="4%"><input type="checkbox" name=&quo
Bootstrap Table 删除和批量删除

一条记录可以看做一条数据的数组 1 Html 1.1 批量选择框 1.2 单个删除 2 bootStarp 2.1 批量获得获得选择的数据 //批量删除 function deleteUserList() { //获取所有被选中的记录 var rows = $("#user").bootstrapTable('getSelections'); if (rows.length== 0) { alert("请先选择要删除的记录!"); ret
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库（在yii框架中操作）的代码分享

效果展示: 代码实现: 控制器 <?php namespace app\controllers; use Yii; use yii\filters\AccessControl; use yii\web\Controller; use yii\filters\VerbFilter; use app\models\LoginForm; use app\models\ContactForm; //use yii\db\ActiveRecord; use yii\data\Pagination; use
vue+element的表格实现批量删除功能示例代码

最近写了一个批量删除功能,遇到了不少坑,特此记录一下表格的代码如下复制代码代码如下: <el-table @row-click="handleCurrentChange" @selection-change="selsChange" ref="table" :data="pageData" stripe :default-sort="{prop: 'createAt', order: 'descendin
ThinkPHP删除栏目(实现批量删除栏目)

前段时间发表了一个删除栏目的随笔,当时实现的功能是删除一条信息,这次来实现一下批量删除栏目. 我们需要达到的是这样一个效果: 选中批量删除按钮后可以选中所有该页面的栏目,这个是前端页面的实现,在这里就不多说了,我们直接进入正题:批量删除的功能. 1.前端页面这里也有一个小小的点,就是选择框的name值应给给他赋值为一个id的数组,value值为该栏目的id. 2.我们在控制器中单独写一个批量删除的方法 public function privilege_bdel(){ $ids = I('ids
Oracle中多表关联批量插入批量更新与批量删除操作

该文章会分为三部分 1.多表关联批量插入 2.多表关联批量更新 3.多表关联批量删除首先要明白一点,为什么会有批量这一个概念,无非就是数据太多了,在java端把数据查出来然后在按照100-300的批次进行更新太耗性能了,而且写出来的代码会非常的臃肿,所谓好的实现是用最少的,最精简的代码实现需求,代码越少,留给自己犯错误的机会更少. 还有一个知识点就是多表关联,对于查询肯定是可以多表关联的,其实对于除了查询之外也是可以进行多表关联过滤数据的,从而达到在Oracle中查到目标数据即可更新,从而规避
vue+element+Java实现批量删除功能

表格的主要代码段主要方法是: @selection-change="selsChange <el-table ref="singleTable" v-loading="loading" :data="tableData" stripe @selection-change="selsChange"> <el-table-column type="selection" width=
Java实现多选批量删除功能（vue+Element）

本文实例为大家分享了Java实现多选批量删除功能的具体代码,供大家参考,具体内容如下选择前效果图选中效果图前端vue代码 1.页面显示template 使用方法 @selection-change="changeFun" 获取表中选中的行所有显示的数据 <template> <div class="dept tab-container"> <div class="dept-table"> <div

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

目录

单行删除与批量删除

一、单行删除

二、批量删除

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

相关推荐

随机推荐