文档章节

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

漂亮得皮皮
 漂亮得皮皮
发布于 08/15 19:07
字数 437
阅读 219
收藏 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
成都
前端工程师
私信 提问
加载中

评论(2)

漂亮得皮皮
漂亮得皮皮
你好,很高兴能对你有帮助。回答问题:代码和接口是对应得
蒋歆
请问我代码拿过去结果页面显示无数据是怎么回事
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
SQL 存储过程的使用对数据的操作(整理思绪补基础)

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

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

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

黑泽明军
05/20
0
0
如解决NSFetchedResultsController 和 UICollectionView一起使用时产生的崩溃

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

秋刀生鱼片
2016/04/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Confluence 6 教程:在 Confluence 中导航

当你对 Confluence 有所了解后,你会发现 Confluence 使用起来非常简单。这个教程主要是针对你使用的 Confluence 界面进行一些说明,同时向你展示在那里可以进行一些通用的任务和操作。 空间...

honeymose
31分钟前
2
0
sed, awk 练习

1. sed打印某行到某行之间的内容 2. sed 转换大小写 将单词首字母转化大写 将所有小写转化大写 3. sed 在某一行最后面添加一个数字 4. 删除某行到最后一行 解析: {:a;N;$!ba;d} :a : 是...

Fc丶
今天
2
0
babel6升级到7,jest-babel报错:Requires Babel "^7.0.0-0", but was loaded with "6.26.3".

自从将前端环境更新到babel7,jest-babel之前是基于babel6的,执行时候就会报:Requires Babel "^7.0.0-0", but was loaded with "6.26.3". 很烦,因为连续帮好几台电脑修复这个问题,所以记...

曾建凯
今天
1
0
探索802.11ax

802.11ax承诺在真实条件下改善峰值性能和最差情况。 如何改善今天的Wi-Fi? 在决定如何改进当前版本以外的Wi-Fi时,802.11ac,IEEE和Wi-Fi联盟调查了Wi-Fi部署和行为,以确定更广泛使用的障碍...

linuxprobe16
今天
2
0
使用linux将64G的SDCARD格式化为FAT32

一、命令如下: sudo fdisk -lsudo mkfs.vfat /dev/sda -Isudo fdisk /dev/sda Welcome to fdisk (util-linux 2.29.2). Changes will remain in memory only, until you decide to wri......

mbzhong
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部