vue+element-ui操作删除（单行和批量删除）

页面展示：

.

<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>