Element: [Feature Request] multiple selection column using custom data for el-table

Created on 28 Jun 2017  ·  7Comments  ·  Source: ElemeFE/element

Existing Component

Yes

Component Name

el-table-column type="selection"

Description

Table with pagination have many unexpected behavior when switching between pages, because showing data and backside data are not bound together.

I'm currently working on a multiple selection table. As suggested on the issue, I used reserve-selection and row-key combined. But with this combination, select-all could still only select those rows within the same page. Also it's hard to make some lines checked before table show.

Maybe it makes more sense in this state to have a table selection column that's depend on the data, like passing in a prop with true/false. Then user make changes to select function outside, just like custom sorting. It could just return the row index when clicked.

table stale feature request

Most helpful comment

同问++

All 7 comments

Chinese Version:

建议增加用户select功能。

在分页的表格中,由于显示数据和后台数据不完全绑定,很容易出现一些问题。

我现在在编写一个有多选功能的表格。某个issue中建议用reserve-selection和row-key解决换页时候的选项记忆问题。但我在使用后发现这并不解决全选按钮的一些问题,例如全选按钮还是只能选中所有当前页面的选项,以及如果将当前页面的选项全部选中后,全选按钮就会变为选中,但是其他页面还是未被选上。同时,也很难做对于特定数据的选项默认为选中。

因此,我建议在selection的el-table-column中加入prop功能,从数据中读入一列,并在选中时候返回行数即可,参考自定义的表格排序。

感谢开发人员的辛勤工作。

@wangtjwork 正好遇到同样的问题。你解决了吗?
现在的 全选 只能选中当前可见页面,不能对所有页面进行控制。
我尝试了一些方法,但是,都不是很稳定。

My updates on the problem:

Added custom select column 'IsSelected',trigger a hand-written render select function each time I switch page or page size. The function would check the current rows that needs to be selected and set the status to true. I also kept the 'reserve-select' and 'row-key' options because without those two the function won't work. Didn't figure out why but that's weird....

As for select-all I added an additional field for memorizing, setting every row's IsSelected to true or false.

There's still a remaining problem: when all the elements on the current page are selected, the select-all checkbox is automatically set to true even if no other elements are selected at all. Don't think I can do anything about this as there seems to be no method to change that checkbox.

The whole size of the data I need to display is less than 10k, and it's fast enough for my needs.

If you have a better way please post.

Chinese Version:

最终在数据中加入新列‘IsSelected’来做custom select,每一次翻页及调整每页显示时候进行渲染操作,从数据中读入应该渲染成select的row。同时使用reserve-select和row-key。不知为什么不用这两个的时候系统不会渲染。
对全选使用额外变量进行记忆,将数据每一个IsSelected调为true或false达到全选及取消全选。

现在唯一的问题就是当前页全部选中时候,系统的全选会自动打钩。这个应该没什么办法了。

我需要显示的数据不算太多大概不超过一万行因此速度还算不错。

如有更好的方式还请告知。

顺便满地打滚求开发人员注意到这个request。

We'll consider this. Now our team doesn't have much manpower on Element, so I'm afraid you'll have to wait a little longer.

现在还不能支持多列排序,能提升一下这个需求的优先级么?

同问++

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

no5no6 picture no5no6  ·  3Comments

akaylh picture akaylh  ·  3Comments

chao-hua picture chao-hua  ·  3Comments

yubo111 picture yubo111  ·  3Comments

Zhao-github picture Zhao-github  ·  3Comments