vue+element实现批量删除

ゝ一纸荒年。 2022-12-29 00:25 182阅读 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 条评论，182人围观）

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

相关阅读

相关批量新增批量删除

批量删除 mapper.xml文件 <delete id="bathDelByIds"> delete from t_good

深藏阁楼爱情的钟/ 2023年10月11日 20:27/ 0 赞/ 96 阅读

相关 Mybatis实现批量删除数据

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

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

相关 vue+element实现批量删除

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

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

相关 Mybatis实现批量删除操作

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

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

相关批量删除

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

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

相关 Mybatis实现批量删除操作

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

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

相关 ajax实现批量删除

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

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

相关批量删除

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

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

相关 mybatis动态Sql实现批量添加和批量删除

mybatis动态Sql实现批量添加和批量删除：新建一个domainMapper接口： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5

比眉伴天荒/ 2022年04月08日 12:17/ 0 赞/ 1028 阅读

相关 SSM实现批量删除功能

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

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