<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. 说自己熟悉 Spring Cloud 这些面试题你会吗

    问题一:什么是Spring Cloud? Spring cloud流应用程序启动器是基于Spring Boot的Spring集成应用程序,提供与外部系统的集成.Spring cloud Task,一个 ...

  2. linux 之oracle静默安装

    一.安装前准备工作1.修改主机名#vi /etc/hosts   //并添加内网IP地址对应的hostname,如下127.0.0.1           localhost::1           ...

  3. 数字图像处理--算术、几何、谐波、逆谐波均值滤波器Matlab

    本文链接:https://blog.csdn.net/Dooonald/article/details/78545461算术均值 close all clear all f=imread('D:/te ...

  4. el-table的type="selection"的使用

    场景:el-table,type="selection"时,重新请求后,设置列表更新前的已勾选项 踩坑:在翻页或者changPageSize之后,table的data会更新,之前勾 ...

  5. PHP 美化输出数组

    var_export — 输出或返回一个变量的字符串表示 此函数返回关于传递给该函数的变量的结构信息,它和 var_dump() 类似,不同的是其返回的表示是合法的 PHP 代码. 您可以通过将函数的 ...

  6. 三种实现PHP伪静态页面的方法

    PHP伪静态写法--其一 伪静态又名:URL重写  主要是为了SEO而生的.(SEO是什么?这个不用问我吧.呵呵-搞网络的不懂SEO那就----) 方法一: 比如这个网页 /soft.php/1,10 ...

  7. mysql查看被锁住的表

    转: mysql查看被锁住的表 2019年05月14日 11:58:59 hlvy 阅读数 1068更多 分类专栏: mysql mysql   转:https://blog.51cto.com/mo ...

  8. 阶段5 3.微服务项目【学成在线】_day06 页面发布 课程管理_20-课程计划添加-前端页面调试

    调试课程计划的添加功能 课程添加的弹窗使用的是dialog组件 这个变量控制对话框是否显示 当点击按钮的时候就设置为true.那么弹窗就会显示出来了  测试 在测试的节点下面添加一个子节点 添加成功后 ...

  9. JavaScript正则表达式补充

    定义正则表达式 /.../用于定义正则表达式 /.../g表示全局匹配 /.../i表示不区分大小写 /.../m表示多行匹配 JS正则匹配时本身就是支持多行,此处多行匹配只是影响正则表达式^和$,m ...

  10. 【已解决】HttpWebRequest的GetResponse或GetRequestStream偶尔超时 + 总结各种超时死掉的可能和相应的解决办法

    [问题] 用C#模拟网页登陆,其中去请求几个页面,会发起对应的http的请求request,其中keepAlive设置为true,提交请求后,然后会有对应的response: resp = (Http ...