el-table全选或者多选时，获取选中的数组

最新推荐文章于 2024-07-08 12:14:04 发布
最新推荐文章于 2024-07-08 12:14:04 发布
阅读量4.6k 收藏 8
点赞数 3
分类专栏： elementUI 文章标签： 多选表格 el-table 获取选中行id数组
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45283768/article/details/105319005
版权

使用el-table时，常常会用到它的多选功能，但是查看其api会发现，只提供了添加为多选表格的属性，但是并没有提供怎么获取我们所选中的行，即所选中的那个行id数组。
其实，el-table在封装时，它的源码中是做了这个获取操作的，我们只需要拿过来一条代码就能搞定。
html：
在这里插入图片描述
js:
在这里插入图片描述
就是这一句简单的代码能满足我们的需要啦！

一头浓密的黑发
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
el-table 设置selection多选，实现单选功能
m0_49016709的博客
09-14 4376
el-table 设置selection多选，实现单选功能
vue+element获取el-table某行的下标,根据下标操作数组对象方式
11-20
1.在vue中对数组中的某个对象进行操作时（替换、删除），都需要用到该对象在数组中的下标。 前端代码： scope.$index ：获取当前行的下标 scope.row：获取当前行的对象 效果图： 思路：通过点击事件将该对象在数组中的下标传递到方法中，然后对数组进行操作 即可根据下标删除数组中对应的对象。 补充知识：vue-element-upload 文件上传打开选择文件弹框前进行提示或操作 在项目中使用文件上传功能时，需求是不能直接弹出弹框，要先二次确认或进行提示。引申开来，即可在打开选择文件弹框之前，做一系列操作。 实现思路在基于element-upload组件的基础上，再加一个按
Element-ui el-table组件单选/多选/跨页勾选讲解
日常笔记/总结/系列知识梳理
05-10 4293
el-table是 Element UI（一个基于 Vue.js 的高质量 UI 组件库）中的一个组件，用于展示表格数据。通过el-table，你可以很方便地创建具有多种功能（如排序、筛选、分页等）的表格。
获取el-table中某一列的所有数据
m0_60067558的博客
11-04 2680
【element-ui】获取el-table其中一列的所有数据-H5W3
el-table 多级数组 合并单元的另类实现，层级布局
南漂一枚
10-24 430
e-table的多级布局
ElementUI表格多选数据处理
weixin_42674490的博客
05-28 1876
ElementUI表格多选数据处理 1.添加复选框 <el-table-column type="selection" :reserve-selection="true" > </el-table-column> 1.在el-table-column里面选择type为selection设置为复选框 2.(可选)如果要获取不同页的数据进行操作，利用reserve-selection，官方文档说明： 2.el-table属性设置 <el-table stripe
element-ui表格多选，下方显示选中的数据
weixin_52369334的博客
07-13 1105
表格多选时，下方需要显示选中的数据，下方取消选中的同时，表格也要随之取消选中
el-select 下拉框多选实现全选的实现
12-12
在写一个功能时发现el-select支持多选，但是竟然不支持全选，好无语哦，那就自己实现一下吧~有两种方法，第二种感觉简单些 方法一：下拉项增加一个【全选】，然后应该有以下几种情况： 下拉选项全都勾选时，【全选...
vue2.0在table中实现全选和反选的示例代码
08-28
Vue 2.0 中 Table 全选和反选的示例代码 在 Vue 2.0 中实现 Table 全选和反选是一种常见的交互方式，本文将介绍如何在 Vue 2.0 中实现 Table 全选和反选的示例代码。 知识点 1: 使用 Vue 的模板语法实现 Table 的...
elementUi vue el-radio 监听选中变化的实例代码
10-16
主要介绍了elementUi vue el-radio 监听选中变化，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
el-table实现选择列显示.zip
04-07
在Vue.js框架中，Element UI库是一个非常受欢迎的前端组件库，它提供了丰富的UI组件，如表格（el-table）、按钮、对话框等，用于快速构建美观的管理界面。本示例"el-table实现选择列显示"是关于如何在Element UI的...
el-table多选，默认选中
qq_42314022的博客
01-17 6886
toggleRowSelection（row, selected）：官网提供的选中行的方法,row：当前选中的行，selected：true选中，false:不选中 给table设置ref属性tableOne（自己定义） this.$nextTick：在下次 DOM 更新循环结束之后执行延迟回调 let that=this ：获取vue对象 that.$refs.tableOne.clearSelection() ：清空用户选择 后边的循环按照自己实际情况来判断选中与否 that.$refs.table
el-table获取多个表格选中项及数据回显
最新发布
weixin_66306526的博客
07-08 840
使用Element UI 中的树形控件和表格组件，实现点击左侧树的不同节点，右侧对应不同表格中，存储记录 不同表格中多选的列表项及已勾选数据的回显
el-checkbox 获取选中的所有数组值,或从选中当中删除已选的数组
周家大小姐
12-02 5440
我这里有三个数组所以看起来复杂点; 需求: 点击的时候把所选中的复选框中的id,val,label组成一个数组,点保存的时候要把所选中的所有值传给后台 <el-checkbox-group v-if="showModule=='riskClass'" v-model="exceptRiskList"> <el-checkbox v-for="item in riskClassOptions" :key="item.classCode" :label="it.
elementUI中的table表格，带选择框，点击选中选择框，获取当前行id，存储数组若没有当前id，存进数组，再次点击，取消选中，从存储数组中删除id
as965874的博客
09-10 2229
需求场景：一个表格中有几十条数据，每一行代表一条，表格第一列是选择框，当点击某一行的选择框，选中此条数据，将此条数据的id存进存储数组，若点击取消选中状态，则将该条数据对应id从存储数组中删除。 template代码 <el-table :data="roleData" style="margin:15px 0" border stripe height="260" @select="(selection,row)=
Vue2 Element el-table多选表格 控制选取的思路
白瑕 的博客
08-29 3380
el-table多选表格实时获取所有选中项, 获取当前选中项, 选取控制, 获取整行数据, 遍历构建多选表格 使用一个div将需要遍历生成的列包裹, 在div上v-for遍历, 但el-table仍然是基于HTML表格的封装, 这就像往原生HTML表格的列外面套了div, 会直接破坏表格结构.......
【实习小tip】el-table勾选获取数据、获取对象数组中相同属性的值、导出数据
fangyuan__的博客
08-05 1878
el-table勾选获取数据、获取对象数组中相同属性的值、导出数据
element ui 表格提交时获取所有选中的checkbox的数据
xiaoman0743的博客
12-18 4783
案例: 代码: &lt;el-table :data="tableDataLeft" border v-loading='loadingData' @selection-change="handleSelectChangeLeft"           element-loading-text='加载中...' ref="multipleTableLeft" row-key="itemCo...
el-table,el-table-column,selection，获取多选选中的数据
xx820702的博客
07-28 5570
el-table,el-table-column,selection，获取多选选中的数据
el-table全选时获取选中行数据
07-20
在 `el-table` 中，可以通过使用 `selection-change` 事件来监听全选或取消全选的动作，并通过 `selection` 属性获取选中的行数据。以下是一个示例代码： ```vue <template> <div> <el-table :data="tableData" @selection-change="handleSelectionChange"> <el-table-column type="selection"></el-table-column> <!-- 其他列定义 --> </el-table> <button @click="getSelectedRows">获取选中行数据</button> </div> </template> <script> export default { data() { return { tableData: [ // 表格数据 ], selectedRows: [] // 存储选中的行数据 }; }, methods: { handleSelectionChange(selection) { this.selectedRows = selection; }, getSelectedRows() { console.log(this.selectedRows); // 在这里可以对选中的行数据进行处理 } } }; </script> ``` 在这个示例中，我们使用 `el-table` 组件展示表格数据，并在表格中添加了一个选择列（通过 `type="selection"` 实现）。通过 `@selection-change` 监听全选或取消全选的动作，并将选中的行数据保存在 `selectedRows` 属性中。 在模板中，我们添加了一个按钮，通过 `@click` 事件触发 `getSelectedRows` 方法，该方法用于获取选中的行数据并进行处理。你可以根据实际需求对选中的行数据进行相应的操作。 请根据实际情况调整代码，并根据需要在按钮点击事件中处理选中的行数据。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值