Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

官网组件demo的Table->useTable bug #3445

Closed
4 tasks
zzc0217 opened this issue Dec 20, 2023 · 10 comments
Closed
4 tasks

官网组件demo的Table->useTable bug #3445

zzc0217 opened this issue Dec 20, 2023 · 10 comments

Comments

@zzc0217
Copy link

zzc0217 commented Dec 20, 2023

⚠️ 重要 ⚠️ 在进一步操作之前,请检查下列选项。如果您忽视此模板或者没有提供关键信息,您的 Issue 将直接被关闭

  • 已阅读 文档.
  • 确保您的代码已是最新或者所报告的 Bug 在最新版本中可以重现. (部分 Bug 可能已经在最近的代码中修复)
  • 已在 Issues 中搜索了相关的关键词
  • 不是 ant design vue 组件库的 Bug

描述 Bug

https://vben.vvbin.cn/#/comp/table/useTable,表格的checkbox选择不了

复现 Bug

点击checkbox以外的当前行可以勾选,但是点击checkbox以后就会选择不了任何行

系统信息

  • 操作系统:w11
  • Node 版本:16.19.0
  • 包管理器 (npm/yarn/pnpm) 及其版本:pnpm
@zzc0217
Copy link
Author

zzc0217 commented Dec 20, 2023

目前发现是因为加了showTableSetting: true,并且rowSelection没有自己定义onselect等参数,就会触发不了,把showTableSetting改为false就正常了

@xachary
Copy link

xachary commented Dec 20, 2023

目前发现是因为加了showTableSetting: true,并且rowSelection没有自己定义onselect等参数,就会触发不了,把showTableSetting改为false就正常了

拿 src\views\demo\table\FixedColumn.vue 测试

给 selectedRowKeys 一个值

  import type { Key } from 'ant-design-vue/lib/table/interface';

  // ...

  const keys: Key[] = [];
  const [registerTable] = useTable({
    title: 'TableAction组件及固定列示例',
    api: demoListApi,
    columns: columns,
    // rowSelection: { type: 'checkbox' },
    rowSelection: { type: 'checkbox', selectedRowKeys: keys },
    bordered: true,
    actionColumn: {
      width: 160,
      title: 'Action',
      dataIndex: 'action',
    },
    showTableSetting: false,
  });

无需 showTableSetting 为 true,也可以重现。

showTableSetting 的 ColumnSetting 有以下代码,导致一样的问题:

   table.setProps({
      rowSelection: showRowSelection
        ? {
            ...defaultRowSelection, // 这里来源于 getRowSelection,包含 selectedRowKeys
            fixed: true,
          }
        : undefined,
    });

根据 https://antdv.com/components/table-cn#api 说明
”指定选中项的 key 数组,需要和 onChange 进行配合“

只是现在由 useRowSelection 管理起来了,除非按原 ant table 自行控制onChange等事件,否则 只设置selectedRowKeys就失效了。

@xachary
Copy link

xachary commented Dec 20, 2023

@zzc0217 稍后提个pr,避免 ColumnSetting 影响 selectedRowKeys,暂时可以除去这个影响。

@xachary
Copy link

xachary commented Dec 20, 2023

"只是现在由 useRowSelection 管理起来了,除非按原 ant table 自行控制onChange等事件,否则 只设置selectedRowKeys就失效了。"

更正一下,无法自行控制selectedRowKeys,需要通过 useRowSelection 的方法控制 selectedRowKey,例如默认选中某几项,就需要用 useRowSelection 的 setSelectedRowKeys。

#3446

@zzc0217
Copy link
Author

zzc0217 commented Dec 21, 2023

"只是现在由 useRowSelection 管理起来了,除非按原 ant table 自行控制onChange等事件,否则 只设置selectedRowKeys就失效了。"

更正一下,无法自行控制selectedRowKeys,需要通过 useRowSelection 的方法控制 selectedRowKey,例如默认选中某几项,就需要用 useRowSelection 的 setSelectedRowKeys。

#3446

好的,感谢!

@zzc0217
Copy link
Author

zzc0217 commented Dec 21, 2023

目前发现是因为加了showTableSetting: true,并且rowSelection没有自己定义onselect等参数,就会触发不了,把showTableSetting改为false就正常了

拿 src\views\demo\table\FixedColumn.vue 测试

给 selectedRowKeys 一个值

  import type { Key } from 'ant-design-vue/lib/table/interface';

  // ...

  const keys: Key[] = [];
  const [registerTable] = useTable({
    title: 'TableAction组件及固定列示例',
    api: demoListApi,
    columns: columns,
    // rowSelection: { type: 'checkbox' },
    rowSelection: { type: 'checkbox', selectedRowKeys: keys },
    bordered: true,
    actionColumn: {
      width: 160,
      title: 'Action',
      dataIndex: 'action',
    },
    showTableSetting: false,
  });

无需 showTableSetting 为 true,也可以重现。

showTableSetting 的 ColumnSetting 有以下代码,导致一样的问题:

   table.setProps({
      rowSelection: showRowSelection
        ? {
            ...defaultRowSelection, // 这里来源于 getRowSelection,包含 selectedRowKeys
            fixed: true,
          }
        : undefined,
    });

根据 https://antdv.com/components/table-cn#api 说明 ”指定选中项的 key 数组,需要和 onChange 进行配合“

只是现在由 useRowSelection 管理起来了,除非按原 ant table 自行控制onChange等事件,否则 只设置selectedRowKeys就失效了。

有个疑问,为什么这里会影响到useRowSelection 的管理select状态出问题呢?

@xachary
Copy link

xachary commented Dec 21, 2023

@zzc0217 我看是useRowSelection接管了selectedRowKeys,而 BasicTable 又依赖 useRowSelection,官方说的,需要更细节的体验,要么优化组件、要么自己实现。useRowSelection 实现了跨分页 selection,其它问题暂时没发现,用它的 method 也算可以满足情况。

@zzc0217
Copy link
Author

zzc0217 commented Dec 22, 2023

@zzc0217 我看是useRowSelection接管了selectedRowKeys,而 BasicTable 又依赖 useRowSelection,官方说的,需要更细节的体验,要么优化组件、要么自己实现。useRowSelection 实现了跨分页 selection,其它问题暂时没发现,用它的 method 也算可以满足情况。

table.setProps({
rowSelection: showRowSelection
? {
...defaultRowSelection, // 这里来源于 getRowSelection,包含 selectedRowKeys
fixed: true,
}
: undefined,
});这里omit掉selectKeys为什么就可以勾选了呢,是因为把引用地址给改变了吗?虽然你处理了但是我还是不知道这个问题是怎么导致的,所以就想请教你一下

@xachary
Copy link

xachary commented Dec 26, 2023

@zzc0217

后来我发现,onSelect 和 onSelectAll 仅作用于 checkbox/radio,点击行并没有触发事件,也是有点怪。

刚刚我更新了一个demo(pr),算是和“选择”有关的比较完整的示例 #3468

未 merge 之前,可以直接复制 Files Changes 的 demo,试试

@anncwb
Copy link
Collaborator

anncwb commented Apr 9, 2024

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days

@anncwb anncwb added the Stale label Apr 9, 2024
@anncwb anncwb closed this as completed Apr 17, 2024
@github-actions github-actions bot locked and limited conversation to collaborators Aug 7, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants