VUE前端删除和批量删除

下面给大家介绍一下前端的删除方法，在开发中我们常常会碰到这种业务，有一些数据需要在前端进行删除，我们并不希望他走后端的接口，而是在点击提交或者其他的业务完成后才走接口，这时我们就用到了vue的前端删除方法。

首先给大家介绍一下删除一条数据的情况：

在element ui的el-table 我们需要先写出删除按钮

<el-tableref="departmentTable":data="tableDepartmentList.data"style="width: 100%"@selection-change="handleSelectionChangeDepartment"><el-table-column label="操作" width="70"><template slot-scope="scope"><span style="cursor: pointer" @click="deleteDepartmentRow(scope.$index)"><i class="el-icon-delete"></i></span></template></el-table-column>
</el-table>
<!--  scope.$index 就是你删除的数据在第几行，第一行就返回1，以此类推。把这个参数传入用于删除 -->

接下来就可以在methods 中定义出这个方法了

methods: {deleteDepartmentRow(index) {this.$confirm("此操作将删除信息, 是否继续?", "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning"}).then(() => {this.tableDepartmentList.data.splice(index, 1);this.$message({type: "success",message: "删除成功!"});}).catch(() => {this.$message({type: "info",message: "已取消删除"});});
}
// 第九行代码就是执行的删除方法，this.tableDepartmentList.data，是el-table绑定的数据，不多解释。splice()方法中可以传入1-3个
// 参数，这里只介绍俩参数的 其他的大家可以去查一下，很简单。
// 当splice(index, 1)中传入两个参数的意思就是: index就是刚刚我们传入的行数，就是删除刚刚我们选中那行的数据. 1代表删除一条

批量删除：

批量删除我们需要配合el-table中的 selection来使用，也就是下面的第七行

<el-tableref="departmentTable":data="tableDepartmentList.data."style="width: 100%"@selection-change="handleSelectionChangeDepartment"><el-table-column type="selection" width="55"></el-table-column><el-table-column label="操作" width="70"><template slot-scope="scope"><span style="cursor: pointer" @click="deleteDepartmentRow(scope.$index, scope.row)"><i class="el-icon-delete"></i></span></template></el-table-column>
</el-table>
<el-button @click="deleteSelected()">批量删除</el-button>

首先需要注意的是 @selection-change=“handleSelectionChangeDepartment”

@selection-change 是组件当中自带的一个方法，它可以取到我们选择的行的值，所以我们在data中定义一个数组，用于保存这些值，官方组件中有解释，大家可以去看看

data() {return {multipleSelectionDepartment: [],}
},
methods: {// 用于保存选中的行handleSelectionChangeDepartment(val) {this.multipleSelectionDepartment = val;},deleteSelected(){this.$confirm('此操作将批量删除部门, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {let val = this.multipleSelectionDepartment     //选中的值if (val) {val.forEach((val, index) => {                 // 这块看不明白的话看下面的解释this.tableDepartmentList.data.forEach((v, i) => {   if (val.deptName === v.deptName) {this.tableDepartmentList.data.splice(i, 1)}})})}this.$message.success("删除成功")})},
}
// 第一层循环就是循环我们选中的值，第二层循环就是循环我们this.tableDepartmentList.data 中所有的值，然后去判断，
// 如果有一样的数据的话就进行删除

VUE前端删除和批量删除相关推荐

vue基于element实现批量删除
前言当数据量庞大时,批量对数据进行操作在后台管理系统中再常见不过了,今天用 vue 基于 element 实现批量删除. 实现思路实现这个操作的关键就在于表格需要绑定 @selection-cha ...
单条删除和批量删除的思路和实现
单条删除和批量删除 5.1 目标前端的"单条删除"和"批量删除"在后端合并为同一套操作.合并的依据是:单条删除时 id 也放在数组中,后端完全根据 id 的 ...
php tp框架做选中删除,关于thinkphp框架实现删除和批量删除的分析
这篇文章主要为大家详细介绍了thinkPHP框架实现删除和批量删除的相关资料,需要的朋友可以参考下本文实例讲一下如何用thinkphp实现数据的删除和批量删除吧. 预期效果图: 原谅博主对照片的处理 ...
第11章角色页的删除、批量删除
<template>  <el-form :model="formQuery" ref="ruleFormRef& ...
商城后台管理系统之普通查询_分页查询_商品的添加，单个删除，批量删除
一.MVC开发模式和JavaEE经典三层结构 1.JSP开发模式一: jsp(接收请求,响应请求,展示数据)+javabean(处理业务逻辑) javaBean:可复用的java组件 -user -u ...
redis关键字删除_Redis批量删除key的小技巧
一.使用keys+xargs实现开始实战 1.连接redis,初始数据./redis-cli -h 127.0.0.1 -p 6379127.0.0.1:6379> set java_suis ...
表名含有后缀 mysql 怎么删除_mysql批量删除指定前缀或后缀表
今天突然发现我们数据库中多出很多表,后缀名为"copy",预计是navicat直接拷贝导致的,然后要对这些有同样后缀名的表进行删除,假设一个一个选择会非常麻烦,表计较多,在网上找了 ...
docker 删除_docker 批量删除镜像
这两天做了些实验,生成了这么多镜像.本文研究删除方法和批量删除方法. 准备工作:查看运行中的容器 sudo docker container ls -a sudo docker container l ...
python批量删除_Python批量删除只保留最近几天table的代码实例
Python批量删除table,只保留最近几天的table 代码如下: #!/usr/bin/python3 """ 批量删除table,只保留最近几天的table &q ...

VUE前端删除和批量删除

首先给大家介绍一下删除一条数据的情况：

批量删除：

VUE前端删除和批量删除相关推荐

最新文章

热门文章