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

[SmallWhiteClouds]

Version

1.22.0

Link to Minimal Reproduction

无

Steps to Reproduce

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

Current Behavior

筛选面板位置错误

Expected Behavior

筛选面板位置错误

Environment

- OS:macOS
- Browser: Chrome
- Framework:Vue@2.6

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值，这样可以临时解决这个问题