<el-table :data="tableData" stripe border style="width: 100%" @selection-change="changeFun">    //这里做一个事件 checkbox发生改变时触发
<el-table-column type="selection" width="55" ref="multipleTable"></el-table-column>
<el-table-column prop="index" label="序号" width="180"></el-table-column>
<el-table-column prop="flowmeterType" label="设备类型"></el-table-column>
<el-table-column prop="flowmeterNo" label="设备编号"></el-table-column>
<el-table-column prop="flowmeterModel" label="设备型号"></el-table-column>
<el-table-column prop="userName" label="用户姓名"></el-table-column>
<el-table-column prop="phone" label="联系方式"></el-table-column>
<el-table-column prop="installationLocation" label="所属小区"></el-table-column>
<el-table-column prop="regionMap.level1" label="所属二级分区"></el-table-column>
<el-table-column prop="regionMap.level2" label="所属一级分区"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
 
 
data{
  return {
    multipleSelection: [] //返回的是选中的列的数组集合   这里接收用户选中的id  默认放在这个数组里面 
}
}
 
 
methods: {
changeFun(val) { //获取用户的选中
console.log(val);
//this.multipleSelection = val // 返回的是选中的列的数组集合
val.forEach(item => {
this.multipleSelection.push(item.flowmeterId);   //把所有的id放进multipleSelection
})
console.log(this.multipleSelection)
 
},
PLdelete() { //批量删除流量计
console.log(this.multipleSelection)
this.$ajax.delete("/dataManagement/basic/deletedBatch",{flowmeterIds:this.multipleSelection})
.then(res => {
console.log(res);
})
},

项目element-ui checkbox里面获取选中项 实现批量删除 修改的更多相关文章

  1. 使用element ui 日期选择器获取值后的格式问题

    一般情况下,我们需要给后台的时间格式是: "yyyy-MM-dd" 但是使用Element ui日期选择器获取的值是这样的: Fri Sep :: GMT+ (中国标准时间) 在官 ...

  2. jquery操作select下拉框的各种方法,获取选中项的值或文本,根据指定的值或文本选中select的option项等

    简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...

  3. wpf ComboBox 获取选中项的文本内容

    一:根据数据源类型获取选中项 类: public class Region { public int REGION_ID { get; set; } public string REGION_CODE ...

  4. ASP.NET MVC搭建项目后台UI框架—6、客户管理(添加、修改、查询、分页)

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  5. checkbox复选框全选批量删除

    多选框全选实现批量删除 html代码 <body> <form action="" method="post" name="Form ...

  6. Servlet 获取 数组id进行批量删除

    把获取的复选框选中的 id(一般来说都是根据id 进行批量删除的) 从jsp页面 传值到Servlet中 jsp点击事件中: var array=[];  //先声明一个数组变量 var ids=$( ...

  7. c#(winform)中ComboBox添加Key/Value项、获取选中项、根据Key

    WinForm下的ComboBox默认是以多行文本来设定显示列表的, 这通常不符合大家日常的应用, 因为大家日常应用通常是键/值对的形式去绑定它的. 参考了一些网上的例子,最终写了一个辅助类用于方便对 ...

  8. AspxTreeList获取选中项的值

    在csdn上了发了次帖子,没人回复,只有自己结贴了.http://bbs.csdn.net/topics/390706314?page=1#post-396723432 //通过选中的节点获取用户ID ...

  9. Element ui select同时获取value和label的值

    代码如下: <el-form-item v-if="isMD" label="业务员名称"> <el-select v-model=" ...

随机推荐

  1. Java 多线程编程(锁优化)

    转:https://mp.weixin.qq.com/s/lDuguEhuWiLY8ofBRy3tZA 并发环境下进行编程时,需要使用锁机制来同步多线程间的操作,保证共享资源的互斥访问. 加锁会带来性 ...

  2. ML_Review_GMM(Ch10)

    Note sth about GMM(Gaussian Mixtrue Model) 高斯混合模型的终极理解 高斯混合模型(GMM)及其EM算法的理解 这两篇博客讲得挺好,同时讲解了如何解决GMM参数 ...

  3. python中的with的用法,上下文管理器

    with是从Python2.5引入的一个新的语法,它是一种上下文管理协议,目的在于从流程图中把 try,except 和finally 关键字和 资源分配释放相关代码统统去掉,简化try….excep ...

  4. OpenJudge计算概论-数字求和

    /*========================================================= 数字求和 总时间限制: 1000ms 内存限制: 65536kB 描述 给定一个 ...

  5. Spring Bootz之热部署

    在项目的pom.xml文件添加如下两段 <dependency> <groupId>org.springframework.boot</groupId> <a ...

  6. python 日期计算

    from datetime import timedelta,datetime import time tdy = datetime.today() tdy = tdy.strftime(" ...

  7. 004-nginx简介、安装配置【源码安装和mac安装】、基本使用

    一.概述 1.1.Nginx是什么 Nginx是一款轻量级的Web服务器,也是一款轻量级的反向代理服务器[常用]. 1.2.Nginx能干什么 Nginx能干的事情很多,这里简要罗列一些: 1:直接支 ...

  8. 阶段5 3.微服务项目【学成在线】_day08 课程图片管理 分布式文件系统_06-分布式文件系统研究-fastDFS安装及配置文件说明

    3 fastDFS入门 3.1fastDFS安装与配置 3.1.1 导入虚拟机 对fastDFS的安装过程不要求学生掌握,可以直接导入老师提供虚拟机. 1.使用Vmware打开虚拟机配置文件“Cent ...

  9. OpenStack Magnum项目简介

    1 项目简介 Magnum是OpenStack中一个提供容器集群部署的服务. Magnum是一个Pass层的OpenStack项目. Magnum使用Heat部署一个包含Docker和Kubernet ...

  10. 123457123457#0#-----com.cym.YuErBaiKe02--前拼后广--育儿百科

    com.cym.YuErBaiKe02--前拼后广--育儿百科