使用element UI中的el-table实现批量选中删除

￡神魔★判官ぃ 2023-01-06 01:29 276阅读 0赞

## el-table实现批量选中删除 ##

最近的vue项目中有个业务，表格数据用的是el-table展示，需要批量删除选中的数据，直接上代码吧

<el-table :data="UserList" ref="multipleTable" stripe border @selection-change="changeBox" style="width: 95%" >
                            <el-table-column type="selection" class-name="isCheck" width="60" >
                            </el-table-column>
                            <el-table-column label="序号" type="index" align="center" width="60" >
                            </el-table-column>
                            <el-table-column prop="userName" label="用户名" align="center" width="155" >
                            </el-table-column>
                            <el-table-column prop="userSex" label="性别" align="center" width="157" >
                            </el-table-column>
                            <el-table-column prop="userEmail" label="邮箱" align="center" width="185" >
                            </el-table-column>
                          </el-table>

@selection-change=“changeBox” 为选中项变化时所用的方法

changeBox(val) {
          this.selectedList = []
          val.forEach((item) => {
            this.selectedList.push(item)
          })
        },

selectedList 为选中之后，存放选中项数据的数组，我后台要求传的数据就是每一项，可以根据后台的需求数据改变selectedList 中的值，然后就可以传到后台了  
愿大家永无bug!

发表评论取消回复

表情：

评论列表（有 0 条评论，276人围观）

还没有评论，来说两句吧...

相关阅读

相关 element-ui中使用loading

我们通过接口调取数据时，有那么一两秒的时间，是在动态的加载数据，有可能会出现一个暂无数据的尴尬场景，这个时候，我们可以用到loading了。我们可以以下面这种优雅的方...

素颜马尾好姑娘i/ 2024年04月18日 16:15/ 0 赞/ 76 阅读

相关 Element-UI+Vue实现用户的删除操作

第一步：引入组件为了避免用户不小心点击的删除按钮，我们应该在删除操作之前提示一下用户，这个时候依然需要使用Element-UI中的弹框组件——确认消息 ![ed4ca

ゝ一纸荒年。/ 2024年04月03日 09:44/ 0 赞/ 59 阅读

相关 element-ui的tabs默认选中页签

Element-UI提供了tabs组件（选项卡、多页签），其中在tabs的属性中提供了一个value/v-model属性来绑定默认选中的页签。 ![842514-201908

骑猪看日落/ 2023年06月04日 03:59/ 0 赞/ 21 阅读

相关 Element ui 中使用table组件实现分页记忆选中

[https://www.bbsmax.com/A/Ae5RMgPAJQ/][https_www.bbsmax.com_A_Ae5RMgPAJQ] 上传到了GitHu

深碍√TFBOYSˉ_/ 2023年02月21日 06:34/ 0 赞/ 4 阅读

相关使用element UI中的el-table实现批量选中删除

el-table实现批量选中删除最近的vue项目中有个业务，表格数据用的是el-table展示，需要批量删除选中的数据，直接上代码吧 <el-table :d

￡神魔★判官ぃ/ 2023年01月06日 01:29/ 0 赞/ 277 阅读

相关 vue+element实现批量删除

![20201218155918213.png][] 表格代码如下：主要是 @selection-change="selsChange" <el-table

ゝ一纸荒年。/ 2022年12月29日 00:25/ 0 赞/ 177 阅读

相关 element ui 图片删除

<el-upload action="/api/uploads" :file-list="addForm.files" list-type="picture-card"

左手的ㄟ右手/ 2022年10月25日 15:27/ 0 赞/ 170 阅读

相关【 Element UI 】—Element UI 的基本使用

【 Element UI 】—Element UI 的基本使用一、基于命令行的方式手动安装 npm 安装 npm i element-ui -S

以你之姓@/ 2022年09月16日 04:45/ 0 赞/ 204 阅读

相关 Element-ui 中table 默认选中 toggleRowSelection

一.toggleRowSelection [查看官网][Link 1] toggleRowSelection(row, selected)接受两个参数，row传递被勾选行的

Love The Way You Lie/ 2021年09月15日 07:28/ 0 赞/ 688 阅读

相关 element-ui后台管理系统学习(8)-选中与取消选中，删除与批量删除

在进行列表处理的时候，我们往往会使用选中删除等功能，此时变涉及选中与取消选中逻辑，另外对于排序也是复杂的逻辑处理，下面简单介绍其逻辑处理过程，需求如图： ![waterm

你的名字/ 2021年08月02日 20:36/ 0 赞/ 544 阅读