文档章节

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

漂亮得皮皮
 漂亮得皮皮
发布于 2018/08/15 19:07
字数 437
阅读 561
收藏 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>

 

© 著作权归作者所有

共有 人打赏支持
漂亮得皮皮
粉丝 2
博文 15
码字总数 7072
作品 0
成都
前端工程师
私信 提问
加载中

评论(3)

朱梓玮
朱梓玮
你好,漂亮得皮皮同学:
handleDelete(index, row) {
this.idx = index;
this.msg=row;//每一条数据的记录
this.delarr.push(this.msg.PackingId);//把单行删除的每条数据的id添加进放删除数据的数组
this.delVisible = true;
},
为什么填入后台接口id删除单行会把所有数据都删掉?我应该怎么做?
漂亮得皮皮
漂亮得皮皮
你好,很高兴能对你有帮助。回答问题:代码和接口是对应得
蒋歆
请问我代码拿过去结果页面显示无数据是怎么回事
el-data-table, 让CRUD更简单👏

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

levy
2018/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
SQL 存储过程的使用对数据的操作(整理思绪补基础)

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

SLoan_
2016/11/24
19
0
如解决NSFetchedResultsController 和 UICollectionView一起使用时产生的崩溃

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

秋刀生鱼片
2016/04/28
0
0
day14_DBUtils学习笔记

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

黑泽明军
2018/05/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

数据库篇多表操作

第1章 多表操作 实际开发中,一个项目通常需要很多张表才能完成。例如:一个商城项目就需要分类表(category)、商品表(products)、订单表(orders)等多张表。且这些表的数据之间存在一定的关系...

stars永恒
37分钟前
1
0
nginx日志自动切割

1.日志配置(Nginx 日志) access.log----记录哪些用户,哪些页面以及用户浏览器,IP等访问信息;error.log------记录服务器错误的日志 #配置日志存储路径:location / {      a...

em_aaron
昨天
2
0
java 反射

基本概念 RTTI,即Run-Time Type Identification,运行时类型识别。RTTI能在运行时就能够自动识别每个编译时已知的类型。   要想理解反射的原理,首先要了解什么是类型信息。Java让我们在运...

细节探索者
昨天
1
0
推荐转载连接

https://www.cnblogs.com/ysocean/p/7409779.html#_label0

小橙子的曼曼
昨天
3
0
雷军亲自打造的套餐了解下:用多少付多少

12月28日消息,小米科技创始人兼CEO雷军微博表示,小米移动任我行套餐方案,原则上就是明明白白消费,用多少付多少,不用不花钱!上网、电话和短信都是一毛钱,上网0.1元/M,电话0.1元/分钟,...

linuxCool
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部