当前位置: 首页 > news >正文

forEach循环遍历取id进行删除

项目中我们经常会遇到要删除、批量删除等操作。
我目前是以element ui 来说明的。
element 中有table 组件 在

 <el-table :data="tableData" :border="true" height="450" @selection-change="handleSelectionChange">
     <el-table-column
       label="序号"
       align="center"
       type="selection"
       show-overflow-tooltip
     />
 </el-table

///其中的" @selection-change是规定事件 。 type="selection"是多选。
我们进行点击的时候会发现可以多选,全选和反选,就是触发@selection-change事件 。
我们在method方法里定义

		   handleSelectionChange(val){
		  console.log(val) // 一般得到的是以数组的形式
		  }

在这里插入图片描述
此时我们就要进行操作了
既然得到了数组,就可以去循环遍历每一项,然后拿到我们想要的值,在重新赋值就行 了
操作如下:
首先我在

data {return { ArrSelection: []’}} 定义一个全局的数组,
也可以不定义,我是觉得这样方便。

在上述的事件里面 以多选删除为例

// 多选框事件,得到id进行删除

handleSelectionChange(val) {
  window.console.log(val) // 得到的是数组
  const arr =  [] // 定义一个数组
  val.forEach((item, i) => {
  		console.log(item , ' item 是打印到选中的数组项', i, ‘i是下标’)
  		//既然得到了item 那么直接取item里的id或者其他值,为了防止错误,可以先打印结果。
  		console.log(item.id)
  		把id放到定义的数组里面去
  		arr.push(item.id)
  		console.log(arr) // 打印看看是不是在多选的情况下push到id
	})
	此时如果用到了全局的id,那么就可以赋值全局的数组了
	this.ArrSelection = arr
  console.log(this.ArrSelection, '/333333333333333')
},

在这里插入图片描述

我们此时要删除,就把删除的接口拿过来,把这个ArrSelection当做参数传给后台接口,最后重新加载tab列表的方法就可以了。
一般是点击的时候会出现弹框再次确认删除,你看需求是什么,这个方法爷那里就可以了

相关文章:

  • CocoaPods升级安装三方库报错
  • router和route 传参接收参数的应用
  • 阿里巴巴SUI Mobile的使用
  • 关于时间向前推算到天,并且算闰年的计算
  • Android传递Bitmap的两种简单方式及其缺陷
  • Android中的mvp
  • 前端初始化项目对axios的封装和token的存储应用以及config.js代理的配置 比较全的了。
  • 开机自启动redis
  • 在一个div标签中平行放置两个echarts 环形图
  • node-webkit,html打包成桌面应用,pc应用
  • 【HTML5】Web存储
  • 利用 vuex写一个todoList
  • Java日志组件2---Log4j(org.apache.log4j.Logger)
  • react项目搭建
  • mybatis3.0 配置等值连接两种方式:resultMap和resulttype
  • [分享]iOS开发-关于在xcode中引用文件夹右边出现问号的解决办法
  • 【EOS】Cleos基础
  • 【mysql】环境安装、服务启动、密码设置
  • 【笔记】你不知道的JS读书笔记——Promise
  • Angular数据绑定机制
  • Bootstrap JS插件Alert源码分析
  • Docker 笔记(1):介绍、镜像、容器及其基本操作
  • JavaScript 基础知识 - 入门篇(一)
  • js对象的深浅拷贝
  • node学习系列之简单文件上传
  • Python - 闭包Closure
  • Redis字符串类型内部编码剖析
  • Vue.js-Day01
  • 第13期 DApp 榜单 :来,吃我这波安利
  • 对JS继承的一点思考
  • 欢迎参加第二届中国游戏开发者大会
  • 免费小说阅读小程序
  • 前端 CSS : 5# 纯 CSS 实现24小时超市
  • 容器服务kubernetes弹性伸缩高级用法
  • 深入浅出webpack学习(1)--核心概念
  • 协程
  • 在electron中实现跨域请求,无需更改服务器端设置
  • Nginx实现动静分离
  • 阿里云移动端播放器高级功能介绍
  • ​渐进式Web应用PWA的未来
  • "无招胜有招"nbsp;史上最全的互…
  • #使用清华镜像源 安装/更新 指定版本tensorflow
  • (4) PIVOT 和 UPIVOT 的使用
  • (7)STL算法之交换赋值
  • (C)一些题4
  • (二)丶RabbitMQ的六大核心
  • (四)七种元启发算法(DBO、LO、SWO、COA、LSO、KOA、GRO)求解无人机路径规划MATLAB
  • .MSSQLSERVER 导入导出 命令集--堪称经典,值得借鉴!
  • .net core使用ef 6
  • .NET Standard / dotnet-core / net472 —— .NET 究竟应该如何大小写?
  • .NetCore部署微服务(二)
  • [ element-ui:table ] 设置table中某些行数据禁止被选中,通过selectable 定义方法解决
  • []常用AT命令解释()
  • [100天算法】-实现 strStr()(day 52)
  • [2010-8-30]