VUE前端删除和批量删除实现代码
作者：Rabbityyhh
这篇文章主要给大家介绍了关于VUE前端删除和批量删除的相关资料, 在实际的开发中,我们可以使用Vue.js来快速实现批量删除功能,文中给出了详细的代码示例,需要的朋友可以参考下
前言
下面给大家介绍一下前端的删除方法，在开发中 我们常常会碰到这种业务，有一些数据需要在前端进行删除，我们并不希望他走后端的接口，而是在点击提交或者其他的业务完成后才走接口，这时我们就用到了vue的前端删除方法。
首先给大家介绍一下删除一条数据的情况：
在element ui的el-table 我们需要先写出删除按钮
<el-table
ref="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-table
ref="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批量删除内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！