2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

頁(yè)面展示：

<template> <!-- 表格內(nèi)容 --><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="包裝編號(hào)" width="120"></el-table-column><el-table-column prop="PackingName" label="包裝名稱" width="120"></el-table-column><el-table-column prop="PackingPrice" label="包裝價(jià)格" 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">刪除不可恢復(fù)，是否確定刪除？</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,//刪除提示彈框的狀態(tài)msg:"",//記錄每一條的信息，便于取iddelarr:[],//存放刪除的數(shù)據(jù)multipleSelection：[],//多選的數(shù)據(jù)}}, methods:{// 獲取數(shù)據(jù),這里只簡(jiǎn)單展示數(shù)據(jù)，最好可以把當(dāng)前頁(yè)面，每頁(yè)顯示數(shù)據(jù)，搜索等參數(shù)傳值到后臺(tái)，因?yàn)閯h除會(huì)影響分頁(yè)和數(shù)據(jù)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;//每一條數(shù)據(jù)的記錄this.delarr.push(this.msg.PackingId);//把單行刪除的每條數(shù)據(jù)的id添加進(jìn)放刪除數(shù)據(jù)的數(shù)組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;//關(guān)閉刪除提示模態(tài)框}, } </script>

?

轉(zhuǎn)載于:https://my.oschina.net/u/3763385/blog/1928536

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。