美文网首页
vue+element-ui操作删除(单行和批量删除)

vue+element-ui操作删除(单行和批量删除)

作者: 氨基钠 | 来源:发表于2020-08-11 15:04 被阅读0次

    页面展示:


    image.png

    .

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

    相关文章

      网友评论

          本文标题:vue+element-ui操作删除(单行和批量删除)

          本文链接:https://www.haomeiwen.com/subject/jmnlrktx.html