获取Element表格中选中的行内容

原创已于 2022-08-05 11:35:55 修改 · 1.7k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #vue #前端

收录于

于 2022-08-02 17:37:41 首次发布

前端专栏收录该内容

29 篇文章

订阅专栏

本文介绍了如何在Vue应用中结合Element-UI库，利用`@selection-change`事件监听表格选择变化，并通过`this.$refs.table.selection`获取选中行的数据。示例展示了在前端开发中实现表格交互的基本步骤。

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

              <el-table
                :data="gcData"
                @selection-change="selsChange"
                border
                height="45px"
                style="width: 100%"
              >

通过this.$refs.table.selection可直接获取

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Passerby_OK

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Element UI 表格点击选中行/取消选中快捷多选以及快捷连续多选，高亮选中行

qq_38396215的博客

08-26

1万+

Element UI 表格点击选中行/取消选中快捷多选以及快捷连续多选，高亮选中行实现效果1. 监听`row-click`事件，实现选中2. 实现选中取消，以及单个选中3. 按住`ctrl`实现多选4. `shift/alt`键实现连续多选5. 实现选中高亮Demo及代码 ElementUI table自带的有一个highlight-current-row的属性，但是只能单选。所以要实现点击行...

elementUI如何获取table 表格中的数据行数据和每一行的id

weixin_42248417的博客

02-22

9228

elementUI如何获取table 表格中的数据行数据和每一行的id

参与评论您还未登录，请先登录后发表或查看评论

vue elementui项目 el-table勾选复选框获取列表当前行数据 el-table收集列表中被选中复选框数据信息

暂时还没想好博客简介

11-30

2万+

el-table勾选复选框如何获取列表当前行id，如何勾选获取表格当前行的index,name，如何勾选获取表格当前行的数据，VUE获取element组件中table表格的id,element中table单元格获取id，elementUI表格如何获取当前选择的id?【ElementUI】获取表格选中行的id数组element中获取选中行元素的IDel-table收集列表中被选中复选框数据信息

ElementPlus中el-table获取单选选中的行数据

程序员思维的博客

05-18

3529

el-table获取单选选中的行数据

elementui 中，点击按钮获取table中一行的数据

weixin_35749440的博客

12-31

6334

在 element-ui 中，你可以通过为表格的行绑定单击事件来获取表格中的一行数据。首先，在你的 template 中，你可以为表格的每一行添加一个点击事件，如下所示： <el-table v-bind:data="tableData" @row-click="handleRowClick"> ... </el-table> 然后，在你的 script 中，你可以...

elementUI table 获取已勾选的行的数据

得之我幸

01-20

1万+

文章目录方法一：主要用到el-table的selection-change事件函数方法二：主要用到el-table的select和select-all事件函数方法一：主要用到el-table的selection-change事件函数优点：简洁明了缺点：如果存在分页，进入别的分页，selection清空 html <el-table size="mini" :v-loading="loading.table" :data="listResult" :row-key="getRowkey" @s

element table多选表格_vue element 表格多选时数据回显

weixin_42393526的博客

01-12

709

在作项目时遇到需求是用户新增了内容以后，编辑此条信息的时候，要根据后台接口返回的数据进行相应的数据回显this在表格中有多选按钮时，回显数据以下code//获取编辑权限列表数据回显GetEditAccount() {editAccount(this.formLabelAlign).then(response => {this.formLabelAlign.name = response.da...

Vue element table表格获取某一行选中值并对选中值进行操作记录一下

热门推荐

sylfffffffff的博客

07-23

3万+

首先，需要码个element的表格。 @selection-change=“handleSelectionChange” 和ref="multipleTable"这两个文档里有说明就不说了。 <template> <div> <el-table :header-cell-style="{background:'#666',color:'whit...

Vue+element 实现表格的增加行、删除行的功能

葫芦娃的博客

08-26

2万+

功能需求： 1、实现一个表格，可以增加行，可以修改每一行的数据； 2、获取选中的行的数据，获取选中行的索引； 3、根据获取的行的索引删除相应的一行的数据。 tableData的数据可以从后台获取。效果：代码实现： <template> <div class="tableDate"> <div class="b...

Element获取table中选中的行

duansamve的博客

05-03

8821

实验版本为：Element2.13.1 ‘’this.$refs.multipleTable.selection‘获取表格选中行信息： <el-button type="primary" @click="getSelection">获取</el-button> <el-table :data="tableData" ref="multipleT...

elementui获取表格选中行数据

weixin_42596287的博客

05-12

5628

1.通过table的selection-change事件获取； 2.通过this.$refs.table.selection获取。

elementui table组件多选获取选中行的数据

qq_45030898的博客

04-13

1万+

1.实用场景我需要对表格中的多行数据进行一次集体操作，比如发短信，怎么拿到选中的数据呢 2.代码实现 <el-table :data="tableData" ref="registTable" > <el-table-column type="selection" min-width="2%"> </el-table-column> </el-table>

el-select获取选中项的所有信息

菜同学的博客

02-22

7249

el-select获取选中项的所有信息

vue elementui表格获取某行数据（slot-scope和selection-change方法使用）

m0_58565372的博客

06-09

2万+

2.但如果要实现的功能是在表头上了，例如图里的批量审核，那要怎么获取当前前勾选的这一行的数据呢？1.当写后台管理页面时，使用element ui里的table表格时，表格中有操作按钮，获取当前行的数据时，我们可以使用 slot-scope="scope"来获取。注意：this.multipleSelection.length 为选择了多少项。拿当前选中的行的数据，进行传值，实现批量审核功能。打印可得当前行数据，你就可以处理这些数据了。打印可得当前行数据，你就可以处理这些数据了。

element ui +Sortable.js 出现拖拽不成功的一个原因

oXiangZuoZuo12345的博客

09-16

2040

<el-table border :data="tableData" style="width: 100%" id="movieTable" row-key="id"> <el-table-column type="index" width="100" label="编号"> </el-table-column> <el-table-column prop="displayname" label="媒资名称">&l..

element-ui表格选中行高亮的效果

jxjianghailan的博客

08-24

2136

子页面操作对父页面有影响时，操作完子页面，父页面定位到选中行的状态效果图：使用到了官方的方法：在子页面点击“保存”或者“确定”按钮之后刷新父页面，传递参数： this.$parent.getList(true); 在父页面方法中添加函数： stCurrentRow(row) { this.$nextTick(function() { this.$refs.monthlyPlanTable.setCurrentRow(row); }) }, .

element 获取table 选中数据_WDA DEMO 05：两个table联动展示数据

weixin_39646688的博客

11-30

298

货铺QQ群号：834508274微信群不能扫码进了，可以加我微信SAPliumeng拉进群，申请时请提供您哪个模块顾问，否则是一律不通过的。进群统一修改群名片，例如BJ_ABAP_森林木。群内禁止发广告及其他一切无关链接，小程序等，进群看公告，谢谢配合不修改昵称会被不定期踢除，谢谢配合下面开始干货：事先声明下，本人没参加过培训，也没看过完整的标准教程，所以一直都是野路子，土八路。所以文...

vue-element ui 实现table表格部分数据行默认选中

早起一杯咖啡

09-26

6412

最近用vue-element ui 开发前端项目时遇到一个棘手的问题，就是在编辑功能中重新设置关联商品时，在打开dialog弹窗中展示所有商品数据的同时默认将已经关联的商品勾选。（描述的可能不清楚，直接上图吧）在各种尝试之后，终于找到了一种解决方法，废话不多说，直接上代码！ HTML: <el-row> <el-col :span="14"> ...

Vue. 之 Element获取table中选中的行

a281412785的博客

06-20

7770

Vue. 之 Element获取table中选中的行　　　　问题描述：　　　　如下截图，在Table中选择数据后，然后在点击“统计”按钮，获取Table表中选择的行　　　　解决方案: 　　1. 给“统计”这个按钮添加一个点击事件：　　　　代码:<el-button type="primary" size="small" plain @click="it...

Element-表格之点击行选中复选框

qq_45974474的博客

08-04

2795

Element-表格之点击行选中多选按钮又是敲代码的一天，想在element-ui的表格中想点击某行选中再点击取消，这是比较常用的功能，客户对于表格的操作就很便利，接下来是实现方法，不想听废话的可以直接看后面代码首先你有一个el-table表格，它可以是这样的 <el-table :data="List"> <el-table-column type="selection" width="55" align="center"/> <el-tabl