2019獨角獸企業重金招聘Python工程師標準>>>

頁面展示：

<template> <!-- 表格內容 --><el-table :data="packData" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange"><el-table-column type="selection" width="55"></el-table-column><el-table-column prop="PackingId" label="包裝編號" width="120"></el-table-column><el-table-column prop="PackingName" label="包裝名稱" width="120"></el-table-column><el-table-column prop="PackingPrice" label="包裝價格" width="120"></el-table-column><el-table-column prop="PackingImage" label="包裝圖片"></el-table-column><el-table-column label="操作" width="180"><template slot-scope="scope"><el-button size="small" @click="handleEdit(scope.$index, scope.row)">編輯</el-button><el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">刪除</el-button></template></el-table-column></el-table> <!-- 刪除提示框 --><el-dialog title="提示" :visible.sync="delVisible" width="300px" center><div class="del-dialog-cnt">刪除不可恢復，是否確定刪除？</div><span slot="footer" class="dialog-footer"><el-button @click="delVisible = false">取 消</el-button><el-button type="primary" @click="deleteRow" >確 定</el-button></span></el-dialog></div> </template> <script> export default {name: 'pack',data() {return {packData:[],delVisible：false,//刪除提示彈框的狀態msg:"",//記錄每一條的信息，便于取iddelarr:[],//存放刪除的數據multipleSelection：[],//多選的數據}}, methods:{// 獲取數據,這里只簡單展示數據，最好可以把當前頁面，每頁顯示數據，搜索等參數傳值到后臺，因為刪除會影響分頁和數據getPackData() {this.$axios.post('/api/selectPackPageMade.do').then((res) => {this.packData = res.data;}).catch(function(error){console.log(error);})},//單行刪除handleDelete(index, row) {this.idx = index;this.msg=row;//每一條數據的記錄this.delarr.push(this.msg.PackingId);//把單行刪除的每條數據的id添加進放刪除數據的數組this.delVisible = true;},//批量刪除delAll() {this.delVisible = true;//顯示刪除彈框const length = this.multipleSelection.length;for (let i = 0; i < length; i++) {this.delarr.push(this.multipleSelection[i].PackingId)}},//操作多選handleSelectionChange(val) {this.multipleSelection = val;},// 確定刪除deleteRow(){this.$axios.get("/api/delPackTotalMade.do",{params:{delarr:this.delarr}}).then(res=>{if(res.data=="包裝刪除成功"){this.getPackData();this.$message.success('刪除成功')}}).catch(error=>{console.log(error);this.$message.error('包裝刪除失敗')})this.delVisible = false;//關閉刪除提示模態框}, } </script>

?

轉載于:https://my.oschina.net/u/3763385/blog/1928536

總結

以上是生活随笔為你收集整理的vue+element-ui操作删除（单行和批量删除）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。