Vue實現(xiàn)單行刪除與批量刪除
更新時間：2022年04月25日 08:35:58 作者：～Phoenix
這篇文章主要介紹了Vue實現(xiàn)單行刪除與批量刪除，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
單行刪除與批量刪除
一、單行刪除
<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(
"此操作將永久刪除該文件, 是否繼續(xù)?",
"提示",
{
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: {
//批量刪除選中數(shù)據方法
async batchDeleteBuild() {
//判斷是否選擇了數(shù)據
if (this.multipleSection.length == 0) {
alert("請選擇要刪除的數(shù)據");
return;
}
//如果有選中的數(shù)據，那么彈出消息框
const confirmDelete = await this.$confirm(
"此操作會永久刪除建筑信息，是否刪除？",
"提示",
{
confimrButtonText: "確定",
cancelButtonText: "取消",
type: "warning"
}
).catch(err => err);
//如果用戶確認刪除，則返回字符串confirm
//如果用戶取消刪除，則返回字符串cancel
if (confirmDelete !== "confirm") {
return this.$message.info("已取消");
}
//將選中的數(shù)據推到deleteCode數(shù)組中
for (var i = 0; i < this.multipleSection.length; i++) {
var j = i;
var id = this.multipleSection[j].id;
this.deleteCode.push(id);
}
//刪除deleteCode中的數(shù)據
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聲明的函數(shù)在調用時都會在函數(shù)內創(chuàng)建自己的this。
** this一般是函數(shù)所操作的對象。如果沒有操作的對象。this在"use strict";嚴格模式下是 undefined，非嚴格模式下是 window。
** 也就是說，function聲明的函數(shù)總是有自己的this。從而遮蓋外層作用域中的this。
** 如果用es6的箭頭函數(shù)()=>{}就沒有自己的this。在箭頭函數(shù)()=>{}中訪問this，是訪問外層作用域中的this
*/
// this.users.forEach(function(item,i) {
// _this.selectArr.push(i)
// })
this.users.forEach((item,i)=>{
this.selectArr.push(i)
})
}
}
}
});
</script>
</body>
</html>
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
對于Element組件的使用,最主要的就是明確自己想要達到的效果,從官網中將對應代碼復制粘貼即可,最重要的是要讀懂不同組件官網中提供的文檔,以便實現(xiàn)自己想要的效果,本文給大家介紹Vue組件庫Element-常見組件表格,感興趣的朋友一起看看吧2023-10-10
vue2自定義組件通過rollup配置發(fā)布到npm的詳細步驟
這篇文章主要介紹了vue2自定義組件通過rollup配置發(fā)布到npm,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
這篇文章主要為大家詳細介紹了vue實現(xiàn)文件上傳讀取及下載功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要介紹了Vue 組件封裝 并使用 NPM 發(fā)布的教程,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09
這篇文章給大家介紹了vue3如何實現(xiàn)頁面跳轉,文中通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-02-02
今天小編就為大家分享一篇vue中子組件的methods中獲取到props中的值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了 vue3.0 CLI - 2.6 - 組件的復用，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了15分鐘學會vue項目改造成SSR(小白教程)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
element-ui?form表單的動態(tài)rules校驗功能實現(xiàn)
在vue項目中，有時候可能會用到element-ui?form表單的動態(tài)rules校驗，這篇文章主要介紹了element-ui form表單的動態(tài)rules校驗,我們可以巧妙的運用element-ui form表單里面form-item的校驗規(guī)則來處理，本文結合實例代碼介紹的非常詳細，需要的朋友可以參考下2023-07-07
詳解unplugin?vue?components不能識別組件自動導入類型pnpm
這篇文章主要為大家介紹了unplugin?vue?components不能識別組件自動導入類型pnpm詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01