頁面展示：
<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>
複製程式碼