文档章节

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

琴妹
 琴妹
发布于 08/15 19:07
字数 437
阅读 109
收藏 0

页面展示:

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

 

© 著作权归作者所有

共有 人打赏支持
琴妹
粉丝 1
博文 11
码字总数 6018
作品 0
成都
前端工程师
el-data-table, 让CRUD更简单👏

el-data-table, 让CRUD更简单👏 编辑于 2018-06-08

levy
06/11
0
0
LINQ To SQL在N层应用程序中的CUD操作、批量删除、批量更新

0. 说明 Linq to Sql,以下简称L2S。 以下文中所指的两层和三层结构,分别如下图所示: 准确的说,这里的分层并不是特别明确: (1) 生成的DataContext(Linq t0 SQL Runtime)和Entity是放在一...

吞吞吐吐的
2017/10/11
0
0
如解决NSFetchedResultsController 和 UICollectionView一起使用时产生的崩溃

是一个非常好用且强大的数据库绑定类,用来处理和的数据绑定非常便捷。 例如官方例子中,实用绑定,完成绑定后,开发者只要专注处理数据就好,UI会根据数据变化自动更新。 并且还提供了缓存功...

秋刀生鱼片
2016/04/28
0
0
SQL 存储过程的使用对数据的操作(整理思绪补基础)

什么是存储过程? 存储过程是SQL语句和控制语句的 预编译集合 ,保存在数据库里,可由应用程序调用执行,而且容许用户声明变量,逻辑控制语句及其他强大的编程功能。而且允许用户声明变量、有...

SLoan_
2016/11/24
19
0
day14_DBUtils学习笔记

一、DBUtils介绍 Apache公司开发的框架。   DBUtils是java编程中的数据库操作实用工具,小巧简单实用。   DBUtils封装了对JDBC的操作,简化了JDBC操作。可以少写代码。 commons-dbutils 是...

黑泽明军
05/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

ZOOKEEPER安装记录

本文借鉴了链接的内容,但是有几部分需要注意: 下载zookeeper的位置是:连接; 执行这两部,得再root下,sudo不能用,还不知道为啥。

恰东
2分钟前
0
0
解决你的无线路由器被蹭网烦恼

教你几招提高无线路由器的安全性-再也不用担心蹭网了。随着无线网络的普及,无线网络的安全问题越来越严重。本文教你几招提高家用无线路由器的安全性,再也不用担心蹭网了。 随着无线网络的普...

linuxprobe16
7分钟前
0
0
分布式系统消息中间件—RabbitMQ的使用进阶篇

前言: 这篇文章主要总结一下RabbitMQ在日常项目开发中比较常用的几个特性。 一。 mandatory 参数 上一篇文章中我们知道,生产者将消息发送到RabbitMQ的交换器中通过RoutingKey与BindingKey的...

Java干货分享
7分钟前
0
0
RabbitMQ清除队列中的所有消息

最近在研究 RabbitMQ 消息队列,安装好进行测试的时候发觉在一个名为 MyRabbitMQ 的消息队列中已经插入了大量的数据。 最后不得不找方法清除。 linux或者windows 输入命令: rabbitmqctl li...

覃大光
11分钟前
0
0
java equals和==的区别

public class StaticDemo { public static void main(String[] args) { /** * 1、包装类的“==”运算在未遇到算术运算的情况下不会自动拆箱(堆中存储的地址是否相同,即栈中的内容是否相同)...

恋码之子
14分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部