Vue实现单行删除与批量删除
更新时间：2022年04月25日 08:35:58 作者：～Phoenix
这篇文章主要介绍了Vue实现单行删除与批量删除，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
单行删除与批量删除
一、单行删除
<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>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
日常开发中，我们可以用 “拿来主义” 借助Bootstarp现成的一些样式，快速生成我们想要的页面布局，避免书写大量的HTML和CSS代码，省下了许多不必要的时间，可以直接搭配vue使用2022-11-11
vue中的核心就是组件，组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码，下面通过本文重点给大家介绍vue 创建组件及组件使用方法，感兴趣的朋友一起看看吧2017-07-07
这篇文章主要介绍了Vuex的初探与实战小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
VUE3刷新页面报错问题解决:Uncaught SyntaxError:Unexpected token &apo
这篇文章主要介绍了VUE3刷新页面报错：Uncaught SyntaxError: Unexpected token ‘＜‘,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
关于element ui的菜单default-active默认选中的问题
这篇文章主要介绍了关于element ui的菜单default-active默认选中的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
vue history 模式打包部署在域名的二级目录的配置指南
这篇文章主要介绍了vue history 模式打包部署在域名的二级目录的配置指南 ，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了Vue项目build后,图片加载不出来的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
在同学们使用某些网站的新版本页面的时候,经常会出现一个类似于新手引导一样的效果,来帮助同学们更好的熟悉新版本页面的功能和使用,这篇文章主要给大家介绍了关于如何利用Vue+intro.js实现页面新手引导流程功能的相关资料,需要的朋友可以参考下2023-11-11
Axios是一个基于Promise用于浏览器和nodejs的HTTP客户端,本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范,下面这篇文章主要给大家介绍了关于vue中使用axios最详细教程的相关资料,需要的朋友可以参考下2022-08-08
本文主要介绍了Vue3 defineComponent作用，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
最新评论