[Bug] 筛选插件如果VTable列比较多，拖动横向滚动条点击后面列的筛选按钮，弹出的筛选面板位置错误

[SmallWhiteClouds]

Version

1.22.0

Link to Minimal Reproduction

无

Steps to Reproduce

表格列比较多出现横向滚动条的时候，拖动横向滚动条到后面的列，点击筛选按钮，弹出的筛选交互面板位置错误

Current Behavior

筛选面板位置错误

Expected Behavior

筛选面板位置错误

Environment

- OS:macOS
- Browser: Chrome
- Framework:[email protected]

Any additional comments?

No response

[fangsmile]

感谢你的反馈！ 如果有开发者对这个 issue 感兴趣，请在issue下方留言“认领该issue”，留言后开始你的创作提pr给我们！ 欢迎大家参与开源共建！我们非常感激每一位贡献者，提交pr后我们将为参与共建的开发者准备一份礼品。 参与共建可参考：https://visactor.io/vtable/guide/Contribution_Guide 与官方开发者交流问题可以下载飞书app扫码加入飞书群： 再次感谢你的支持！

Thank you for your feedback! We have received your question and will deal with it later. If any developer is interested in this issue, please leave a message "claim this issue" below the issue. Welcome to participate in open source co-construction! We are very grateful to every contributor. After submitting the PR, we will prepare a gift for the developers who participated in the co-construction. For participation in co-construction, please refer to: https://visactor.io/vtable/guide/Contribution_Guide To communicate with official developers, you can download the Feishu app and scan the QR code to join the Feishu group！ Thank you again for your support!

[SmallWhiteClouds]

bug复现可以参考：https://www.visactor.io/vtable/guide/plugin/filter?version=1.22.0 `// import * as VTable from '@visactor/vtable'; // 使用时需要引入插件包 @visactor/vtable-plugins // import { FilterPlugin } from '@visactor/vtable-plugins'; // 正常使用方式 const filterPlugin = new FilterPlugin({}); // 官网编辑器中将 VTable.plugins 重命名成了 VTablePlugins

const generateDemoData = (count) => { const departments = ['研发部', '市场部', '销售部', '人事部', '财务部']; const statuses = ['在职', '请假', '离职'];

return Array.from(new Array(count)).map((_, i) => ({ id: i + 1, name: 员工${i + 1}, age: 22 + Math.floor(Math.random() * 20), department: departments[i % departments.length], salary: 5000 + Math.floor(Math.random() * 15000), status: statuses[i % statuses.length], isFullTime: i % 3 !== 0 })); };

const filterPlugin = new VTablePlugins.FilterPlugin({ filterModes: ['byValue', 'byCondition'] });

const option = { records: generateDemoData(50), columns: [ { field: 'id', title: 'ID', width: 60 }, { field: 'name', title: '姓名', width: 120 }, { field: 'age', title: '年龄', width: 100 }, { field: 'department', title: '部门', width: 120 }, { field: 'salary', title: '薪资', width: 120, fieldFormat: (record) => '￥' + record.salary }, { field: 'status', title: '状态', width: 100 }, { field: 'isFullTime', title: '全职', width: 80, cellType: 'checkbox' }, { field: 'status1', title: '状态1', width: 100 }, { field: 'status2', title: '状态2', width: 100 }, { field: 'status3', title: '状态3', width: 100 }, { field: 'status4', title: '状态4', width: 100 }, { field: 'status5', title: '状态5', width: 100 }, ], plugins: [filterPlugin] };

const tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option); window.tableInstance = tableInstance; `

[WittaChenOO]

应该用 getCellRelativeRect 拿相对定位，而不是getMergeCellRect 可以这样临时修复： const origShow = FilterToolbar.prototype.show; FilterToolbar.prototype.show = function(col, row, filterModes) { origShow.call(this, col, row, filterModes); // Run original logic first

    // Now override the popup position
    let left = 0, top = 0;
    const canvasBounds = this.table.canvas.getBoundingClientRect();
    const cell = this.table.getCellRelativeRect(col, row);

    if (cell.right < this.filterMenuWidth) {
        left = cell.left + canvasBounds.left;
        top = cell.bottom + canvasBounds.top;
    } else {
        left = cell.right + canvasBounds.left - this.filterMenuWidth;
        top = cell.bottom + canvasBounds.top;
    }

    this.filterMenu.style.left = `${left}px`;
    this.filterMenu.style.top = `${top}px`;
};

[SmallWhiteClouds]

应该用 getCellRelativeRect 拿相对定位，而不是 getMergeCellRect 可以这样临时修复： const origShow = FilterToolbar.prototype.show; FilterToolbar.prototype.show = function(col, row, filterModes) { origShow.call(this, col, row, filterModes); // 先运行原来的逻辑

    // Now override the popup position
    let left = 0, top = 0;
    const canvasBounds = this.table.canvas.getBoundingClientRect();
    const cell = this.table.getCellRelativeRect(col, row);

    if (cell.right < this.filterMenuWidth) {
        left = cell.left + canvasBounds.left;
        top = cell.bottom + canvasBounds.top;
    } else {
        left = cell.right + canvasBounds.left - this.filterMenuWidth;
        top = cell.bottom + canvasBounds.top;
    }

    this.filterMenu.style.left = `${left}px`;
    this.filterMenu.style.top = `${top}px`;
};

我通过监控滚动条滑动事件拿到了滑动的距离，然后监控筛选面板显示时修改了面板样式的left值，这样可以临时解决这个问题