vue+element-ui獲取select的label

頁面展現: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>
相關文章
相關標籤/搜索