vue+element实现批量删除

ゝ一纸荒年。 2022-12-29 00:25 123阅读 0赞

![20201218155918213.png][]

表格代码如下：主要是    @selection-change="selsChange"

<el-table ref="singleTable" v-loading="loading" :data="tableData" stripe
                  style="margin-top: 15px" @selection-change="selsChange">
     <el-table-column
        type="selection"
        width="55" >
     </el-table-column>  //复选框
     <el-table-column label="#" type="index" width="60"></el-table-column>  //id
    </el-table>

定义显示值

data(){
          return{
            sels: [],//选中的值显示
          }
        }

选中时触发

selsChange(sels) {
        this.sels = sels 
    },

批量删除按钮   disabled设置是否可用

<el-button @click="deleteFileOrDirectory(sels)" :disabled="this.sels.length === 0"> 批量删除</el-button>

绑定事件

deleteFileOrDirectory() {
            var ids= this.sels.map(item => item.id).join()//获取所有选中行的id组成的字符串，以逗号分隔
            console.log(ids)
            this.$confirm('此操作将永久删除该文件及其子文件, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {      
                console.log("删除成功")
              })
            })
          }

[20201218155918213.png]: /images/20221120/4a8a031c8e1240709c8fd2f477551919.png

发表评论取消回复

表情：

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

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

相关阅读

相关 vue+element实现批量删除

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

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

相关 Mybatis实现批量删除操作

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

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

相关批量删除

贴一段批量删除的代码，写得太好了。页面代码： <td><input type="checkbox" name="key" id="<c:out value="${

系统管理员/ 2022年08月13日 15:46/ 0 赞/ 217 阅读

相关 Mybatis实现批量删除操作

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

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

相关 JSP页面实现批量删除数据

实现这个功能的基本思路如下： 1：在jsp页面中获取到要删除对象的ID，一个或多个，批量当然是多个 2：在action中就要接收这些ID，并对这些ID进行初步的处理

分手后的思念是犯贱/ 2022年05月10日 05:04/ 0 赞/ 411 阅读

相关 ajax实现批量删除

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

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

相关批量删除

大概思路就是给input框绑定id 绑定name 然后写一个按钮之类的给赋上一个id 通过id点击事件大概代码如下我用的是laravel框架写的第一步绑定

蔚落/ 2022年04月17日 03:46/ 0 赞/ 285 阅读

相关 SSM框架实现批量删除操作

Controller: @RequestMapping("/delectBatchById") @ResponseBody public Aj

太过爱你忘了你带给我的痛/ 2022年03月18日 05:23/ 0 赞/ 790 阅读

相关 jsp jQuery Ajax 实现批量删除

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"

爱被打了一巴掌/ 2022年02月05日 04:21/ 0 赞/ 267 阅读

相关 SSM实现批量删除功能

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

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