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 获取当前日期时间及其它操作实现代码
Mar 04 Javascript
js继承call()和apply()方法总结
Dec 08 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
Oct 14 Javascript
jQuery获取当前点击的对象元素(实现代码)
May 19 Javascript
javascript过滤数组重复元素的实现方法
May 03 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
May 23 Javascript
Vue使用Proxy监听所有接口状态的方法实现
Jun 07 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
Nov 05 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
Apr 09 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 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封装的smartyBC类完整实例
2016/10/19 PHP
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
ExtJS 下拉多选框lovcombo
2010/05/19 Javascript
JavaScript中__proto__与prototype的关系深入理解
2012/12/04 Javascript
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
前台js调用后台方法示例
2013/12/02 Javascript
分享JavaScript与Java中MD5使用两个例子
2015/12/23 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
javascript容错处理代码(屏蔽js错误)
2017/01/20 Javascript
Vue表单验证插件Vue Validator使用方法详解
2017/04/07 Javascript
vue中实现左右联动的效果
2018/06/22 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
es6数值的扩展方法
2019/03/11 Javascript
Nodejs中的require函数的具体使用方法
2019/04/02 NodeJs
layui问题之自动滚动二级iframe页面到指定位置的方法
2019/09/18 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
Python 随机生成中文验证码的实例代码
2013/03/20 Python
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
python脚本实现音频m4a格式转成MP3格式的实例代码
2019/10/09 Python
Python SQLAlchemy入门教程(基本用法)
2019/11/11 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
python之随机数函数的实现示例
2020/12/30 Python
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
2013/09/02 HTML / CSS
CHARLES & KEITH英国官网:新加坡时尚品牌
2018/07/04 全球购物
代码中finally中的代码会不会执行
2012/02/06 面试题
周鸿祎:教你写创业计划书
2013/12/30 职场文书
大学生村官典型材料
2014/01/12 职场文书
水利公司纪检监察自我鉴定
2014/02/25 职场文书
旺仔牛奶广告词
2014/03/20 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
党员民主评议总结
2014/10/20 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
会议开幕词
2015/01/28 职场文书
通知范文怎么写
2015/04/16 职场文书
Python与C++中梯度方向直方图的实现
2022/03/17 Python