Skip to content

[Bug] customLayout 中点击自定义 radio 时,长列表场景下表格滚动条会发生跳动 #5049

@whisper540

Description

@whisper540

Version

1.17.7

Link to Minimal Reproduction

https://www.visactor.com/vtable/playground?specId=7237827639&timestamp=1773645350252&version=1.17.7&theme=light

Steps to Reproduce

这个问题在以下条件下比较容易稳定复现:

  • 使用 ListTable
  • 某一列通过 customLayout 渲染可点击 radio
  • 表格数据较多,例如 200 条以上
  • 用户将滚动条滚动到接近当前可视区域底部
  • 点击某一行中的 radio

复现步骤

  1. 创建一个包含较多数据(例如 200 条)的 ListTable
  2. 在其中一列使用 customLayout 渲染一个可点击的 radio 控件
  3. 将表格滚动到靠近底部的位置
  4. 点击某一行中的 radio
  5. 观察滚动条位置

Current Behavior

[Bug] customLayout 中点击自定义 radio 时,长列表场景下表格滚动条会发生跳动

版本信息

  • @visactor/vtable: 1.17.7

使用场景

我们在 ListTable 中使用了 customLayout 自定义渲染单选按钮(radio),不是直接使用原生 cellType: 'radio'

当表格数据较多、用户滚动到当前可视区域靠近底部的位置时,点击某一行中的自定义 radio,表格滚动条会发生异常跳动,有时向上跳,有时向下跳。

表象上看,就是点击后当前行像“跳走了”,因为滚动位置发生了变化。

期望结果

点击自定义 radio 后,只更新 radio 的选中状态,不应改变表格当前滚动位置。

实际结果

点击自定义 radio 后,表格滚动位置会发生变化,导致当前视口中的内容跳动。

复现条件

这个问题在以下条件下比较容易稳定复现:

  • 使用 ListTable
  • 某一列通过 customLayout 渲染可点击 radio
  • 表格数据较多,例如 200 条以上
  • 用户将滚动条滚动到接近当前可视区域底部
  • 点击某一行中的 radio

复现步骤

  1. 创建一个包含较多数据(例如 200 条)的 ListTable
  2. 在其中一列使用 customLayout 渲染一个可点击的 radio 控件
  3. 将表格滚动到靠近底部的位置
  4. 点击某一行中的 radio
  5. 观察滚动条位置

实际影响

这个问题会影响单选交互体验:

  • 用户点击单选时,当前视口会跳动
  • 会误以为点击后表格自动滚动到了别的位置
  • 对长列表或分页场景下的操作干扰较明显

最小示意代码

const columns = [
  {
    field: 'selection_radio',
    title: '',
    width: 50,
    cellType: 'text',
    customLayout: ({ table, row, col, rect }) => {
      const group = createGroup({
        width: rect.width,
        height: rect.height,
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        pickable: false,
      })

      const radio = new Radio({
        checked: false,
        text: { text: '' },
      })

      radio.addEventListener('click', (e) => {
        e.stopPropagation()
        // 在这里更新自定义单选状态
      })

      group.add(radio)

      return {
        rootContainer: group,
        renderDefault: false,
      }
    },
  },
  // 其他普通列...
]

const table = new ListTable({
  container,
  records: largeData, // 例如 200+ 行
  columns,
  select: {
    disableSelect: true,
    disableDragSelect: true,
    disableHeaderSelect: true,
  },
})


### Expected Behavior

点击自定义 radio 后,只更新 radio 的选中状态,不应改变表格当前滚动位置。

### Environment

```markdown
- OS: Win11
- Browser: Chrome
- Framework: Vue3

Any additional comments?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions