VisActor / VTable

VTable is not just a high-performance multidimensional data analysis table, but also a grid artist that creates art between rows and columns.
https://visactor.io/vtable
MIT License
1.39k stars 95 forks source link

【Bug】设置 select.highlightMode 为row,表格滚动后行选中效果异常 #2028

Closed mzhang-eric closed 4 days ago

mzhang-eric commented 5 days ago

复现步骤 :

  1. https://visactor.io/vtable/demo/interaction/select-highlight

使用官网示例,修改 columns 和 option,如下:

    // 减少列数,使画布右侧有空白出现
    const columns = [
      {
        field: 'Order ID',
        title: 'Order ID',
        width: 'auto'
      },
      {
        field: 'Customer ID',
        title: 'Customer ID',
        width: 'auto'
      },
      {
        field: 'Product Name',
        title: 'Product Name',
        width: 'auto'
      },
    ];

    // 将 select.highlightMode 改为 row,其他配置项不变
    const option = {
         // ...others
          select: {
              highlightMode: 'row'
           },
    };
  1. 选中某一个单元格,此时所在行会高亮,然后在画布空白处滚动表格,将选中行滚动出视口范围再滚动回来,此时行高亮样式没有立即出现,在官网示例页面看会延迟一下再出现行高亮样式,实际上在本地[React项目]运行该示例,在滚动操作完成之后,鼠标保持停留在画布空白处,行高亮样式即使延迟一会儿也不会出现,需要鼠标在表格区域移动一下才能显示出行高亮样式,似乎是要触发重绘才行。