頁面展現:ios
<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:"",//記錄每一條的信息,便於取id delarr:[],//存放刪除的數據 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>