-
Notifications
You must be signed in to change notification settings - Fork 455
Open
Labels
bugSomething isn't workingSomething isn't working
Description
Version
1.17.7
Link to Minimal Reproduction
Steps to Reproduce
这个问题在以下条件下比较容易稳定复现:
- 使用
ListTable - 某一列通过
customLayout渲染可点击 radio - 表格数据较多,例如 200 条以上
- 用户将滚动条滚动到接近当前可视区域底部
- 点击某一行中的 radio
复现步骤
- 创建一个包含较多数据(例如 200 条)的
ListTable - 在其中一列使用
customLayout渲染一个可点击的 radio 控件 - 将表格滚动到靠近底部的位置
- 点击某一行中的 radio
- 观察滚动条位置
Current Behavior
[Bug] customLayout 中点击自定义 radio 时,长列表场景下表格滚动条会发生跳动
版本信息
@visactor/vtable:1.17.7
使用场景
我们在 ListTable 中使用了 customLayout 自定义渲染单选按钮(radio),不是直接使用原生 cellType: 'radio'。
当表格数据较多、用户滚动到当前可视区域靠近底部的位置时,点击某一行中的自定义 radio,表格滚动条会发生异常跳动,有时向上跳,有时向下跳。
表象上看,就是点击后当前行像“跳走了”,因为滚动位置发生了变化。
期望结果
点击自定义 radio 后,只更新 radio 的选中状态,不应改变表格当前滚动位置。
实际结果
点击自定义 radio 后,表格滚动位置会发生变化,导致当前视口中的内容跳动。
复现条件
这个问题在以下条件下比较容易稳定复现:
- 使用
ListTable - 某一列通过
customLayout渲染可点击 radio - 表格数据较多,例如 200 条以上
- 用户将滚动条滚动到接近当前可视区域底部
- 点击某一行中的 radio
复现步骤
- 创建一个包含较多数据(例如 200 条)的
ListTable - 在其中一列使用
customLayout渲染一个可点击的 radio 控件 - 将表格滚动到靠近底部的位置
- 点击某一行中的 radio
- 观察滚动条位置
实际影响
这个问题会影响单选交互体验:
- 用户点击单选时,当前视口会跳动
- 会误以为点击后表格自动滚动到了别的位置
- 对长列表或分页场景下的操作干扰较明显
最小示意代码
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: Vue3Any additional comments?
No response
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
bugSomething isn't workingSomething isn't working