vue中批量删除的实现

曾经终败给现在 2023-10-10 23:32 7阅读 0赞

1、在列表页面添加批量删除按钮：

<el-button type="danger" size="mini" @click="removeRows()">批量删除</el-button>

2、在每条数据前面添加复选框：

<el-table-column type="selection" width="55"/>

3、表格中添加selection-change事件，添加位置：

<el-table :data="list" stripe style="width: 100%" @selection-change="handleSelectionChange">

上面代码中 list为js data中声明的数据，用于接收后台返回的数据

4、编写批量删除JS代码：

<script>
    
    import user from '@/api/user'
    
    export default{
      //定义变量和初始值
      data(){
        return{
          current:1,
          limit:10,
          searchObj:{}, //条件查询封装对象
          list:[],
          total:0,
          multipleSelection: [] // 批量选择中选择的记录列表
        }
      },
      created(){  //在页面渲染前执行
           this.getList()
      },
      methods: {
        //数据列表
        getList(page=1){ //添加当前页参数，page传多少切换为实际值
          this.current=page
          user.getList(this.current,this.limit,this.searchObj)
                  .then(response => {
                    //console.log(response.data)
                     this.list=response.data.records
                     this.total=response.data.total
                  })
                  .catch(error => {
                    console.log(error)
                  })
        },
    
    removeRows(){
      this.$confirm('此操作将永久删除选中的用户信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
       }).then(()=>{
        var idList=[]
        for(var i=0;i<this.multipleSelection.length;i++){
            var obj=this.multipleSelection[i]
            var id=obj.id
            idList.push(id)
         }
         user.batchRemove(idList)
                .then(response => {
                  //提示
                  this.$message({
                    type: 'success',
                    message: '删除成功!'
                  })
                  //刷新页面
                  this.getList(1)
    
                  })
                
           })
        }
    
      }
    }
    
    </script>

前端和后台交互的JS

import request from '@/utils/request'
    
    export default{
     getList(current,limit,searchObj) {
        return request({
          url: `/api/user/list/${current}/${limit}`,
          method: 'post',
          data:searchObj
        })
      },
     
     batchRemove(idList){
      return request({
        url: `/api/user/batchRemove`,
        method: 'delete',
        data:idList
      })
     }
    }

注意上方getList的url为使用反转的单引号，不是平时使用的普通单引号。

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关 SSM Mybatis 中传入List实现批量插入、批量更新、批量删除

代码（Service和ServiceImpl 省略）： **1. 批量插入**： Mapper层： int insertList(List<Use...

电玩女神/ 2024年04月17日 05:24/ 0 赞/ 135 阅读

相关 vue中批量删除的实现

1、在列表页面添加批量删除按钮： <el-button type="danger" size="mini" @click="removeRows()">批量删除</e

曾经终败给现在/ 2023年10月10日 23:32/ 0 赞/ 8 阅读

相关 Mybatis实现批量删除数据

Mybatis实现批量删除操作学习内容： 1. 使用 2. 代码实现 2.1 UserMapper.java 接口

分手后的思念是犯贱/ 2023年01月21日 14:19/ 0 赞/ 61 阅读

相关 vue+element实现批量删除

![20201218155918213.png][] 表格代码如下：主要是 @selection-change="selsChange" <el-table

ゝ一纸荒年。/ 2022年12月29日 00:25/ 0 赞/ 207 阅读

相关 Mybatis实现批量删除操作

一. 这里主要考虑两种参数类型:数组或者集合而这点区别主要体现在EmpMapper.xml文件中标签的collection属性: （1）当collection=”arr

约定不等于承诺〃/ 2022年10月17日 05:58/ 0 赞/ 382 阅读

相关 vue 项目批量删除功能实现

一定义 api 模块 import request from '@/utils/request' export default {

骑猪看日落/ 2022年09月15日 06:05/ 0 赞/ 303 阅读

相关 Mybatis实现批量删除操作

一. 这里主要考虑两种参数类型:数组或者集合. 而这点区别主要体现在EmpMapper.xml文件中标签的collection属性: 1. 当collection=”ar

ゝ一纸荒年。/ 2022年05月28日 05:20/ 0 赞/ 387 阅读

相关 ajax实现批量删除

这几天一直在学习ajax，实现了用ajax来批量删除数据。 HTML <thead> <tr> <th class="t

旧城等待，/ 2022年05月09日 00:08/ 0 赞/ 327 阅读

相关 easyui-datagrid中批量删除功能的实现

easyui-datagrid中批量删除功能的实现过程： 1.在表格中加上【复选框】一项 <th data-options="field:'ck',checkb

向右看齐/ 2022年04月12日 09:44/ 0 赞/ 287 阅读

相关 SSM实现批量删除功能

批量删除功能的实现其实实现这个功能还是挺简单的因为我这是直接拼接的，所以用了DOM方法来获取id 话不多说直接上代码首先是复选框全选和反选这里的话

青旅半醒/ 2022年01月07日 12:55/ 0 赞/ 469 阅读