element-plus [Component] [table] el-table的select/selection-change事件没有当前行是否已被勾选的布尔值

yhqotfr8  于 4个月前  发布在  其他
关注(0)|答案(6)|浏览(36)

Bug Type: Component

Environment

  • Vue Version: 3.2.45
  • Element Plus Version: 2.2.36
  • Browser / OS: 版本 110.0.5481.78(正式版本) (64 位)
  • Build Tool: Vue CLI

Reproduction

  • el-table

Element Plus Playground

Steps to reproduce

点击复选框,拿不到当前复选框是否勾选的状态

What is Expected?

给我一个当前Checkbox 是否已被勾选的布尔值。最好select/selection-change事件都给

What is actually happening?

不知道当Checkbox是否已被勾选

Additional comments

在示例的业务里,由于table数据是 变化的,我能实现点击【删除按钮】时去掉table对应的勾选,但由于缺少一个布尔值,无法实现在table取消勾选时从下方显示的内容去掉那条取消勾选的数据

ovfsdjhp

ovfsdjhp1#

playground

这样好像可以实现你的需求

fzwojiic

fzwojiic2#

playground

这样好像可以实现你的需求

抱歉,是我没描述清楚,table 的数据变化的时候需要保留下面的houseTags展示数据,并且当 新的table数据 里某一行row从选中变为取消时,想要下面的展示数据里找到并删掉那一行row。
https://element-plus.run/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuICA8ZWwtdGFibGVcbiAgICByZWY9XCJ0YWJsZVJlZlwiXG4gICAgOmRhdGE9XCJ0YWJsZURhdGFcIlxuICAgIHN0eWxlPVwid2lkdGg6IDEwMCVcIlxuICAgIEBzZWxlY3Rpb24tY2hhbmdlPVwic2VsZWN0aW9uQ2hhbmdlXCJcbiAgPlxuICAgIDxlbC10YWJsZS1jb2x1bW4gdHlwZT1cInNlbGVjdGlvblwiIHdpZHRoPVwiNTVcIiAvPlxuICAgIDxlbC10YWJsZS1jb2x1bW4gcHJvcD1cImRhdGVcIiBsYWJlbD1cIkRhdGVcIiB3aWR0aD1cIjE4MFwiIC8+XG4gICAgPGVsLXRhYmxlLWNvbHVtbiBwcm9wPVwibmFtZVwiIGxhYmVsPVwiTmFtZVwiIHdpZHRoPVwiMTgwXCIgLz5cbiAgICA8ZWwtdGFibGUtY29sdW1uIHByb3A9XCJhZGRyZXNzXCIgbGFiZWw9XCJBZGRyZXNzXCIgLz5cbiAgPC9lbC10YWJsZT5cbiAgPGVsLWJ1dHRvbiBAY2xpY2s9XCJ1cGRhdGVUYWJsZVwiPiDmm7TmlLnmlbDmja4gPC9lbC1idXR0b24+XG4gIDxkaXY+5pi+56S66YCJ5LitPC9kaXY+XG4gIDxkaXYgdi1mb3I9XCIoaXRlbSwgaW5kZXgpIGluIGhvdXNlVGFnc1wiIDprZXk9XCJpbmRleFwiPlxuICAgIDxzcGFuPnt7IGl0ZW0gfX0gPC9zcGFuPlxuICAgIDxlbC1idXR0b24gQGNsaWNrPVwiZGVsZXRlSXRlbShpdGVtKVwiPiDliKDpmaTmjInpkq4gPC9lbC1idXR0b24+XG4gIDwvZGl2PlxuPC90ZW1wbGF0ZT5cblxuPHNjcmlwdCBsYW5nPVwidHNcIiBzZXR1cD5cbmltcG9ydCB7IHJlZiB9IGZyb20gJ3Z1ZSdcblxuY29uc3QgdGFibGVSZWYgPSByZWYobnVsbClcbmNvbnN0IHRhYmxlRGF0YSA9IHJlZihbXG4gIHtcbiAgICBkYXRlOiAnMjAxNi0wNS0wMycsXG4gICAgbmFtZTogJ1RvbScsXG4gICAgYWRkcmVzczogJ05vLiAxODksIEdyb3ZlIFN0LCBMb3MgQW5nZWxlcycsXG4gIH0sXG4gIHtcbiAgICBkYXRlOiAnMjAxNi0wNS0wMicsXG4gICAgbmFtZTogJ1RvbScsXG4gICAgYWRkcmVzczogJ05vLiAxODksIEdyb3ZlIFN0LCBMb3MgQW5nZWxlcycsXG4gIH0sXG4gIHtcbiAgICBkYXRlOiAnMjAxNi0wNS0wNCcsXG4gICAgbmFtZTogJ1RvbScsXG4gICAgYWRkcmVzczogJ05vLiAxODksIEdyb3ZlIFN0LCBMb3MgQW5nZWxlcycsXG4gIH0sXG4gIHtcbiAgICBkYXRlOiAnMjAxNi0wNS0wMScsXG4gICAgbmFtZTogJ1RvbScsXG4gICAgYWRkcmVzczogJ05vLiAxODksIEdyb3ZlIFN0LCBMb3MgQW5nZWxlcycsXG4gIH0sXG5dKVxuZnVuY3Rpb24gdXBkYXRlVGFibGUoKXtcbiAgdGFibGVEYXRhLnZhbHVlPVsge1xuICAgIGRhdGU6ICcyMDIyLTAxLTAzJyxcbiAgICBuYW1lOiAnVG9tMTExMScsXG4gICAgYWRkcmVzczogJ05vLiAxODksIEdyb3ZlIFN0LCBMb3MgQW5nZWxlcycsXG4gIH0sXG4gIHtcbiAgICBkYXRlOiAnMjAyLTA1LTAyJyxcbiAgICBuYW1lOiAnVG9tMjIyMjInLFxuICAgIGFkZHJlc3M6ICdOby4gMTg5LCBHcm92ZSBTdCwgTG9zIEFuZ2VsZXMnLFxuICB9LF1cbn1cblxuY29uc3QgaG91c2VUYWdzID0gcmVmKFtdKVxuZnVuY3Rpb24gc2VsZWN0aW9uQ2hhbmdlKHJvd3MpIHtcbiAgaG91c2VUYWdzLnZhbHVlID0gcm93c1xufVxuXG5mdW5jdGlvbiBkZWxldGVJdGVtKGl0ZW0pIHtcbiAgY29uc3QgbmVlZERlbGV0ZSA9IGhvdXNlVGFncy52YWx1ZS5maWx0ZXIoKGkpID0+IGkuZGF0ZSA9PT0gaXRlbS5kYXRlKVxuICB0b2dnbGVTZWxlY3Rpb24obmVlZERlbGV0ZSlcbn1cblxuY29uc3QgdG9nZ2xlU2VsZWN0aW9uID0gKHJvd3MpID0+IHtcbiAgaWYgKHJvd3MpIHtcbiAgICByb3dzLmZvckVhY2goKHJvdykgPT4ge1xuICAgICAgdGFibGVSZWYudmFsdWUhLnRvZ2dsZVJvd1NlbGVjdGlvbihyb3csIHVuZGVmaW5lZClcbiAgICB9KVxuICB9IGVsc2Uge1xuICAgIHRhYmxlUmVmLnZhbHVlIS5jbGVhclNlbGVjdGlvbigpXG4gIH1cbn1cbjwvc2NyaXB0PlxuIiwiaW1wb3J0X21hcC5qc29uIjoie1xuICBcImltcG9ydHNcIjoge31cbn0iLCJfbyI6e319

kxkpmulp

kxkpmulp3#

playground

这样好像可以实现你的需求

我的想法是,当table数据变化了 且 新数据里的某一行row从选中变为取消时,我可以通过事件给的布尔值来判断当前这一行row是否要从下面的houseTags展示数据里找到并删掉

ryhaxcpt

ryhaxcpt4#

我的想法是,当table数据变化了 且 新数据里的某一行row从选中变为取消时,我可以通过事件给的布尔值来判断当前这一行row是否要从下面的houseTags展示数据里找到并删掉

demo

这个demo实现了你说的:
第一点(在table取消勾选时从下方显示的内容去掉那条取消勾选的数据)
第二点(新数据里的某一行row从选中变为取消,想要下面的展示数据里找到并删掉那一行row)

uhry853o

uhry853o5#

我的想法是,当table数据变化了 且 新数据里的某一行row从选中变为取消时,我可以通过事件给的布尔值来判断当前这一行row是否要从下面的houseTags展示数据里找到并删掉

demo

这个demo实现了你说的: 第一点(在table取消勾选时从下方显示的内容去掉那条取消勾选的数据) 第二点(新数据里的某一行row从选中变为取消,想要下面的展示数据里找到并删掉那一行row)

你的意思让我在select事件的时候记录下选中的row数组,当它的数量比记录的数量少1的时候就去 houseTags显示数据 里找到并删掉它?不可否认这确实能解决我目前的问题,如果说select事件暴露出选中状态的布尔值的工作量确实很大的话,那确实可以先不做。
补充下我实际的操作流程示例:

  1. 在表格原数据里选中第1、2、3行数据
  2. 点击 更改数据 按钮,选中新数据里的第1、2行数据
  3. 此时,houseTags显示数据 里共有原数据(1、2、 3)和新数据(1、2)共5条
  4. 点击 新数据里的第1行,这时,第1行状态会从 选中 变为 取消 。此时需要从 houseTags显示数据里找到并删除掉它。
7tofc5zh

7tofc5zh6#

@co2color 我这边也遇到了需要 select 事件有一个参数返回当前操作是取消勾选/勾选的操作,并返回这些数据。

使用场景

我想实现跨页勾选表格的功能,最简单的实现方案是这样的。

  1. 勾选了行就将当前行数据存贮到 Map
  2. 取消勾选从当前 Map 中删除这条数据
  3. 在翻页时,会默认选中已勾选的行

遇到的问题

无法简便的知道勾选操作是取消勾选操作,还是勾选操作。只能通过 select 事件返回的两个参数遍历后判断当前操作,这样做麻烦不说,每次勾选操作都要进行循环判断,性能也差。

相关问题