element-ui表格触发两次 @selection-change事件导致无法选中数据

最新推荐文章于 2024-07-24 23:00:08 发布
最新推荐文章于 2024-07-24 23:00:08 发布
阅读量2.8k 收藏 5
点赞数 2
文章标签： elementui 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37514029/article/details/123370551
版权

在前端做了分页

解决办法：

添加row-key属性 ，并且在type=”selection“的行中添加reserve-selection属性。

 

 

可乐M
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue2中解决切换时el-table的 @selection-change方法失效问题:
m0_71933288的博客
08-04 1697
但是,在测试时发现el-table中的@selection-change方法失效,原因就是当使用:key="Math.random()"时，每次渲染el-table组件时，key值都会发生变化
element中table的selection-change监听改变的那条数据的下标
c_qianxia5040的博客
05-31 309
当想要得到选中信息在原表格数据中的下标时，可变相在获取表格数据中添加每条数据的下标信息，这样在选中某条时就可以得到它在原来数据中排老几。当绑定方法selection-change，当选择项发生变化时会触发该事件。在勾选打印时，就会得到index下标。可以获得到选中行的所有信息，
element-ui中的table里@selection-change方法执行了两次
小手冰凉
05-11 874
问题描述： 当执行renewReaderChange这个方法的时候发现莫名其妙的执行两次，而且复选框勾不上。
element-ui中@selection-change执行两次
qq_40934617的博客
02-14 5968
element-ui中的table里@selection-change执行了两次 <template> <div> <div> <el-input clearable placeholder="搜索..." prefix-icon="el-icon-search" v-model="serarchText"></el-input> </div> <el-table border stripe
element-UI中table表格的@row-click事件和@selection-change耦合了
热门推荐
qq_38698753的博客
08-02 1万+
&lt;el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @row-click="openDetails" @selection-change="handleSelectionChange"&gt; &lt;el-table-co
Element-ui--el-tablez中的 @selection-change 【获取复选框集合】
CC酱写前端的博客
02-16 2737
真实项目数据格式：接口数据如下真实展示， 加载角色列表的选中项（根据后台返回的id），以及用户点击选中的项处理 <template> <el-scrollbar class="scrolbar-wrapper"> <el-table ref="table" :data="apiObj" @select="(selection,row)=>{selectionChange(selection,row)}" // select
element-ui table 的事件 @select-all @selection-change
weixin_45888523的博客
02-03 6483
element-ui el-table @select-all @selection-change带参数 <template> <el-table ref="tableData" :data="tableData" @selection-change="(selections)=>{handSelectionChange(selections,'参数')}" @select-a
elementUi中 el-table中@selection-change执行了两次
weixin_43968963的博客
12-01 3281
问题出现原因： el-table（表格）和el-pagination（分页）结合起来前端实现分页功能的时候，表格复选框执行两次，导致复选框无法勾选上，效果图如下： 代码： <el-table ref="multipleTable" :data="tableData.slice((currentPage - 1) * pageSize,currentPage * pageSize)" tooltip-effect="dark"
elementui el-table的 @selection-change执行了两次
树上骑个猴的博客
12-15 3303
出现的情况： 表格复选框执行两次，导致复选框无法勾选上 <el-table ref="multipleTable" :data="tableData.slice((currentPage - 1) * pageSize,currentPage * pageSize)" tooltip-effect="dark" style="width: 100%" @selection-change="handleS
【记录43】el-table @selection-change 数据回显、条件约束、历史回显清除
~牧马~
05-31 582
表格中选中的人员，点击取消后，再次进来人员还在，部分可能觉得正常，实际是不对（切换了数据绑定对象，还存在是不对的）。这里笔者做了一个点击取消就默认为当前选择的取消（不要了）限制选中人员上限，大家可能会想到直接判断选中的list，实际操作中存在一个问题：你选择了，给了提示，表格显示上还是会选中。在其他地方设置好人员，到对应的页面直接在表格中复选设置好的人员。到这里基本完成了回显功能。
详解element-ui表格中勾选checkbox，高亮当前行
12-29
我们在做后台管理系统的时候经常需要操作表格，这里我们要实现的一个功能...勾选表格中当前项时会触发selection-change事件，在中绑定handleSelectionChange方法。 <el selection-change=handleSelectionChange > 编
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
12-11
综上所述，Vue.js结合Element UI实现的这个示例展示了如何利用组件化的方式构建一个可编辑的表格，包括数据绑定、事件处理、表单编辑和验证、数据同步以及UI交互，这些都是前端开发中的常见场景和重要技能。...
详解vue2.0的Element UI的表格table列时间戳格式化
08-30
在HTML模板中，定义了一个表格，并指定了数据源`tableData`、加载状态`loading`以及选择改变时触发的`selectionChange`事件。表格包含两列，一列显示“创建时间”，另一列显示“更新时间”。其中，“创建时间”列...
组合element里面的select和tree实现的treeSelect选择器
08-09
6. **事件传播**：为了让父组件知道当前选中的值，你需要在`SelectTree`组件中触发自定义事件，如`on-change`，并将选中的值作为参数传递。 7. **样式定制**：为了与现有应用风格保持一致，你可能还需要对组件样式...
elementUI多选框反选的实现代码
12-09
`el-table`的`@select`和`@select-all`事件可以监听选中或全选的行为，但这些事件只会在当前页面的选中状态发生变化时触发，无法满足跨页和检索后保持选中状态的需求。 为了解决这个问题，我们需要用到Element UI的...
带分页的el-table获取全选的勾选状态
代码青春
07-23 159
带分页的el-table获取全选的勾选状态
element-plus时间组件el-date-picker只能选择当前及之前日期
weixin_52583582的博客
07-24 242
默认是这样的，需要绑定disabled-date属性，并且赋值。
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
最新发布
yangshuquan的专栏
07-24 774
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
element-ui 表格 selection-change，获取勾选后的index索引值
05-24
在 `element-ui` 的表格组件中，可以使用 `selection-change` 事件来监听勾选的变化。当勾选状态发生变化时，该事件会触发，同时会传递一个参数为当前勾选中的数据列表。 如果需要获取勾选后的索引值，可以遍历这个数据列表，获取每个勾选中数据的 `index` 属性值。例如： ```html <template> <el-table :data="tableData" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { date: '2022-01-01', name: '张三', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2022-01-02', name: '李四', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2022-01-03', name: '王五', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2022-01-04', name: '赵六', address: '上海市普陀区金沙江路 1516 弄' } ], selectedRows: [] } }, methods: { handleSelectionChange(rows) { // 遍历勾选中的数据，获取索引值 this.selectedRows = rows.map(row => this.tableData.indexOf(row)) } } } </script> ``` 在上面的例子中，我们在 `handleSelectionChange` 方法中通过遍历 `rows` 数组来获取勾选的数据在 `tableData` 中的索引值，并将这些索引值存储在 `selectedRows` 数组中。你可以根据实际需求对这些索引值进行进一步的处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值