官网组件demo的Table->useTable bug

[zzc0217]

⚠️ 重要 ⚠️ 在进一步操作之前，请检查下列选项。如果您忽视此模板或者没有提供关键信息，您的 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]

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

[xachary]

目前发现是因为加了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]

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

[xachary]

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

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

https://github.com/vbenjs/vue-vben-admin/pull/3446

[zzc0217]

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

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

#3446

好的，感谢！

[zzc0217]

目前发现是因为加了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]

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

[zzc0217]

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

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

[xachary]

@zzc0217

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

刚刚我更新了一个demo（pr），算是和“选择”有关的比较完整的示例 https://github.com/vbenjs/vue-vben-admin/pull/3468

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

[anncwb]

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