Vue实现表格批量审核功能实例代码


Posted in Javascript onMay 28, 2019

本文实例为大家分享了Vue实现表格批量审核功能的具体代码,供大家参考,具体内容如下

1 前端部分

效果如下图所示:

Vue实现表格批量审核功能实例代码

1.1 html部分

<el-form-item>
   <el-button type="success" icon="el-icon-search" @click="auditServer()" :disabled="this.sels.length === 0">批量审核</el-button>
    <el-button @click="toggleSelection()">取消选择</el-button>
    </el-form-item>
    </br>
    <el-table border :fit="true" ref="multipleTable" height="520" :data="listData" :highlight-current-row="true" size="small" @selection-change="selsChange" @row-click="handleChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="applcd" label="微服务编码" show-overflow-tooltip width="130px" sortable fixed="left"></el-table-column>
        <el-table-column prop="servcd" label="服务编码" show-overflow-tooltip width="130px" sortable fixed="left"></el-table-column>
 </el-table>

代码说明:

1)为table添加属性

@selection-change="selsChange" @row-click="handleChange"

2)添加一列 指定type为selection,表示该表格可选择

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

3)当没有选择服务时,按钮不可选;

:disabled="this.sels.length === 0"

1.2 js部分

export default {
 data () {
  return {

   sels:[],


 methods: {


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

  handleChange(row, event, column) {
    this.$refs.multipleTable.toggleRowSelection(row)
  },
  auditServer () {
   var servids = this.sels.map(item => item.servid).join(",")
   var params = {
    serverIds:servids
   }
     debugger
     auditServer(params).then(
     function (res) {
     debugger
      if(res.code === 200){
      this.$message({
           message: res.data,
           type: 'success'
          })
      this.dialogFormVisible = false
      }else{
      this.$message({
         message: '错误信息:'+res.message,
         type: 'error'
        });
      }
        this.loadData()
     }.bind(this)
    )
  },

  toggleSelection(){
  this.$refs.multipleTable.clearSelection();
  }
 }
}

2 后端部分

2.1 mapper.xml

批量修改的Mybatis实现方式,注意sql语句的书写

<!--审核服务信息-->
  <update id="auditServers" parameterType="java.util.List">
    update sdcp_serv
    SET ISAUDITED ='1'
    where servid in
    <foreach collection="list" index="index" item="item"
         separator="," open="(" close=")">
      #{item,jdbcType=VARCHAR}
    </foreach>
</update>

2.2 mapper.java(对应的接口)

int auditServers(List<String> servids);

2.3 controller

/**  
 * @Description: 批量审核服务信息 
 * @param @param map
 * @param @return
 * @param @throws Exception  参数 
 * @return Object  返回类型  
 */ 
    @RequestMapping(value = "/auditServers", method = RequestMethod.POST)
    public Object auditServers(@RequestBody Map<String, Object> map) throws Exception {
      if (map.get("serverIds")!=null){
        String serverIds = (String) map.get("serverIds");
        List<String> ids = Arrays.asList(serverIds.split(","));
        apiServerMapper.auditServers(ids);
      }
      return ResponseData.success("服务信息修改成功");
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JSQL 批量图片切换的实现代码
May 05 Javascript
使用Java实现简单的server/client回显功能的方法介绍
May 03 Javascript
jquery基础教程之deferred对象使用方法
Jan 22 Javascript
Javascript中的arguments与重载介绍
Mar 15 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
Nov 16 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
May 31 Javascript
js友好的时间返回函数
Aug 24 Javascript
bootstrap 表单验证使用方法
Jan 11 Javascript
浅谈Vue.js
Mar 02 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
javascript运行机制之执行顺序理解
Aug 03 Javascript
微信小程序实现日历签到
Sep 21 Javascript
vue+Element实现搜索关键字高亮功能
May 28 #Javascript
vue input输入框关键字筛选检索列表数据展示
Oct 26 #Javascript
vue+elementUI实现表格关键字筛选高亮
Oct 26 #Javascript
Django+Vue实现WebSocket连接的示例代码
May 28 #Javascript
Vue3.0结合bootstrap创建多页面应用
May 28 #Javascript
Vue实现搜索结果高亮显示关键字
May 28 #Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 #Javascript
You might like
php中的登陆login
2007/01/18 PHP
PHP MemCached 高级缓存应用代码
2010/08/05 PHP
克隆一个新项目的快捷方式
2013/04/10 PHP
ci检测是ajax还是页面post提交数据的方法
2014/11/10 PHP
php中smarty变量修饰用法实例分析
2015/06/11 PHP
详解PHP PDO简单教程
2019/05/28 PHP
jQuery库与其他JS库冲突的解决办法
2010/02/07 Javascript
javascript cookie操作类的实现代码小结附使用方法
2010/06/02 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
javascript实现给定半径求出圆的面积
2015/06/26 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
2016/12/23 Javascript
js实现彩色条纹滚动条效果
2017/03/15 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
2017/07/06 Javascript
JavaScript实现职责链模式概述
2018/01/25 Javascript
JavaScript 中 JSON.parse 函数 和 JSON.stringify 函数
2018/12/05 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
vue实现日历备忘录功能
2020/09/24 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
python构造icmp echo请求和实现网络探测器功能代码分享
2014/01/10 Python
python 异常处理总结
2016/10/18 Python
Python基于正则表达式实现文件内容替换的方法
2017/08/30 Python
windows下python安装pip图文教程
2018/05/25 Python
利用Python将每日一句定时推送至微信的实现方法
2018/08/13 Python
Python实现的KMeans聚类算法实例分析
2018/12/29 Python
在Python中字典根据多项规则排序的方法
2019/01/21 Python
python3使用QQ邮箱发送邮件
2020/05/20 Python
Python TKinter如何自动关闭主窗口
2020/02/26 Python
简述 Python 的类和对象
2020/08/21 Python
英国美发和美容产品商城:HQhair
2019/02/08 全球购物
Glamest意大利:女性在线奢侈品零售店
2019/04/28 全球购物
银行竞聘演讲稿
2014/05/16 职场文书
2014年教育工作总结
2014/11/26 职场文书
入党政审材料范文
2014/12/24 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书
Python基础之常用库常用方法整理
2021/04/30 Python
Python入门学习之类的相关知识总结
2021/05/25 Python