vue+element+Java实现批量删除功能


Posted in Javascript onApril 08, 2019

表格的主要代码段

主要方法是: @selection-change="selsChange

<el-table ref="singleTable" v-loading="loading" :data="tableData" stripe @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="deleteAll(sels)" :disabled="this.sels.length === 0"> 批量删除</el-button>

绑定事见

deleteAll() {
    var ids= this.sels.map(item => item.id).join()//获取所有选中行的id组成的字符串,以逗号分隔
    console.log(ids)
    this.$confirm('此操作将永久删除该文件及其子文件, 是否继续?', '提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消',
     type: 'warning'
    }).then(() => {   
     axios.post("/****/****/deleteAll",{ids:ids}).then(resp=>{ 
      // 传递到后台处理的方刷新页面,callback中使用你最初获取页面信息的方法就行,就会刷新页面
      if (resp.data.status == 200){
      this.$alter(resp.data.message,'',{ 
        confirmButtonText: "确定",
        callback:action=>{     
        _this.searchClick(),
        }
       }
      }
     } 
     })
    })
   }

后台解析

@RequestMapper("deleteAll")
public void delete(@RequestBody Map<String,Objetc> params){
 // 获取传回来的id字符串
 String ids = params.get("ids").toString();
 // 通过逗号分割字符串,获得所有的id,在mapper中通过mybatis提供的动态循环遍历并删除数组中对应id的值就行
 String[] id = ids.split(",");
 // 根据自己的后台逻辑,调用service的方法,我就不写了
}

总结

以上所述是小编给大家介绍的vue+element+Java实现批量删除功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
了解一点js的Eval函数
Jul 26 Javascript
瀑布流布局代码一例
Apr 11 Javascript
jquery禁用右键示例
Apr 28 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
全国省市二级联动下拉菜单 js版
May 10 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
Dec 08 Javascript
js控制按钮,防止频繁点击响应的实例
Feb 15 Javascript
three.js绘制地球、飞机与轨迹的效果示例
Feb 28 Javascript
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
Sep 06 Javascript
Vue修改项目启动端口号方法
Nov 07 Javascript
JS面向对象之多选框实现
Jan 17 Javascript
如何为你的JavaScript代码日志着色详解
Apr 08 #Javascript
详解element-ui日期时间选择器的日期格式化问题
Apr 08 #Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
Apr 08 #Javascript
服务端预渲染之Nuxt(使用篇)
Apr 08 #Javascript
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
Apr 08 #Javascript
面试题:react和vue的区别分析
Apr 08 #Javascript
vue router 组件的高级应用实例代码
Apr 08 #Javascript
You might like
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
解析php php_openssl.dll的作用
2013/07/01 PHP
php foreach循环中使用引用的问题
2013/11/06 PHP
php实现删除空目录的方法
2015/03/16 PHP
Yii2验证器(Validator)用法分析
2016/07/23 PHP
php远程请求CURL实例教程(爬虫、保存登录状态)
2020/12/10 PHP
浅谈javascript的数据类型检测
2010/07/10 Javascript
jQuery队列操作方法实例
2014/06/11 Javascript
node.js超时timeout详解
2014/11/26 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
2015/09/01 Javascript
JS闭包的几种常见形式实例详解
2017/09/16 Javascript
浅谈javascript错误处理
2019/08/11 Javascript
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
javascript实现鼠标点击生成文字特效
2019/12/24 Javascript
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
python的keyword模块用法实例分析
2015/06/30 Python
python清除字符串里非数字字符的方法
2015/07/02 Python
Python操作SQLite数据库的方法详解
2017/06/16 Python
在Django中输出matplotlib生成的图片方法
2018/05/24 Python
Sanic框架流式传输操作示例
2018/07/18 Python
python rsa实现数据加密和解密、签名加密和验签功能
2019/09/18 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
Pycharm自带Git实现版本管理的方法步骤
2020/09/18 Python
世界最大的私人旅行指南出版商:孤独星球
2016/08/23 全球购物
澳大利亚制造的蜡烛和扩散器:Glasshouse Fragrances
2018/05/20 全球购物
三八节标语
2014/06/27 职场文书
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
2014年居委会工作总结
2014/12/09 职场文书
2016银行求职自荐信
2016/01/28 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书
假期读书倡议书3篇
2019/08/19 职场文书
OpenCV-Python实现人脸磨皮算法
2021/06/07 Python
OpenCV图像变换之傅里叶变换的一些应用
2021/07/26 Python