search

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] 编辑框会把整个顶出去 #2039

Closed TryChai closed 2 days ago

TryChai commented 4 days ago

Version

1.4.0

Link to Minimal Reproduction

no link

Steps to Reproduce

// 使用时需要引入插件包@visactor/vtable-editors // import * as VTable_editors from '@visactor/vtable-editors'; // 正常使用方式 const input_editor = new VTable.editors.InputEditor(); // 官网编辑器中将 VTable.editors重命名成了VTable_editors let tableInstance; const input_editor = new VTable_editors.InputEditor(); VTable.register.editor('input-editor', input_editor); fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_Pivot_Chart_data.json') .then(res => res.json()) .then(data => { const option = { "records": [ { "adjustPriceTemplateTaskId": "1727162416739835906", "adjustPriceTemplateId": "1727162399991980034", "roomCategoryClusterId": "1725421011508662274", "campId": "17", "day": 0, "executeTime": "2024-07-03T02:10:58.734Z", "coefficient": 0.9, "Day": "", "Time": "10:10", "1725421011508662274": 0.9 }, { "adjustPriceTemplateTaskId": "1808058679097872386", "adjustPriceTemplateId": "1727162399991980034", "roomCategoryClusterId": "1806951784658468866", "campId": "17", "day": 0, "executeTime": "2024-07-03T02:10:58.735Z", "coefficient": 0.35, "Day": "", "Time": "10:10", "1806951784658468866": 0.35 }, { "adjustPriceTemplateTaskId": "1808067748110061570", "adjustPriceTemplateId": "1727162399991980034", "roomCategoryClusterId": "1725420560616787970", "campId": "17", "day": 0, "executeTime": "2024-07-03T02:10:58.735Z", "coefficient": 0.35, "Day": "", "Time": "10:10", "1725420560616787970": 0.35 }, { "Day": "", "Time": "10:10", "coefficient": 0, "day": "0", "executeTime": "2024-07-03T02:10:30.950Z", "roomCategoryClusterId": "1806952135168065538", "_key": "e8e04b74-c3c3-4e70-8c32-0fa8318d0da5" }, { "Day": "", "Time": "10:10", "coefficient": 0, "day": "0", "executeTime": "2024-07-03T02:10:34.212Z", "roomCategoryClusterId": "1806952480904552450", "_key": "2ac3c474-6062-4ab8-a1f5-1881a8599a7f" }, { "adjustPriceTemplateTaskId": "1808057537735479298", "adjustPriceTemplateId": "1727162399991980034", "roomCategoryClusterId": "1725421011508662274", "campId": "17", "day": 0, "executeTime": "2024-07-03T08:37:58.735Z", "coefficient": 0.65, "Day": "", "Time": "16:37", "1725421011508662274": 0.65 }, { "Day": "", "Time": "16:37", "coefficient": 0, "day": "0", "executeTime": "2024-07-03T08:37:30.950Z", "roomCategoryClusterId": "1806952135168065538", "_key": "69554865-2265-4871-b8c9-b57ae3a7ca6b" }, { "Day": "", "Time": "16:37", "coefficient": 0, "day": "0", "executeTime": "2024-07-03T08:37:34.212Z", "roomCategoryClusterId": "1806952480904552450", "_key": "7a5380da-8837-486b-a5f4-890835ee2648" }, { "day": "0", "executeTime": "2024-07-03T08:44:05.265Z", "roomCategoryClusterId": "1725420560616787970", "_key": "beb9261e-08af-4c8c-8af6-3111d12a9b6c", "Day": "", "Time": "16:44" }, { "day": "0", "executeTime": "2024-07-03T08:44:05.265Z", "roomCategoryClusterId": "1725421011508662274", "_key": "fc874a81-32e0-48ec-b31f-219116bbea63", "Day": "", "Time": "16:44" }, { "day": "0", "executeTime": "2024-07-03T08:44:05.265Z", "roomCategoryClusterId": "1806951784658468866", "_key": "35b30395-3e95-4d24-9997-f6b13517f618", "Day": "", "Time": "16:44" }, { "Day": "", "Time": "16:44", "coefficient": 0, "day": "0", "executeTime": "2024-07-03T08:44:30.950Z", "roomCategoryClusterId": "1806952135168065538", "_key": "b863df8b-d622-45d3-9a36-fdf4c3092da3" }, { "Day": "", "Time": "16:44", "coefficient": 0, "day": "0", "executeTime": "2024-07-03T08:44:34.213Z", "roomCategoryClusterId": "1806952480904552450", "_key": "b3378c51-72d6-4006-a34c-be167ba59149" }, { "adjustPriceTemplateTaskId": "1736583269042458626", "adjustPriceTemplateId": "1727162399991980034", "roomCategoryClusterId": "1725421011508662274", "campId": "17", "day": 0, "executeTime": "2024-07-03T08:50:58.734Z", "coefficient": 0.8, "Day": "", "Time": "16:50", "1725421011508662274": 0.8 }, { "adjustPriceTemplateTaskId": "1807717884339736578", "adjustPriceTemplateId": "1727162399991980034", "roomCategoryClusterId": "1806951784658468866", "campId": "17", "day": 0, "executeTime": "2024-07-03T08:50:58.734Z", "coefficient": 0.36, "Day": "", "Time": "16:50", "1806951784658468866": 0.36 }, { "Day": "", "Time": "16:50", "coefficient": 0, "day": "0", "executeTime": "2024-07-03T08:50:30.950Z", "roomCategoryClusterId": "1806952135168065538", "_key": "20e7754e-58aa-45c0-8b1e-ea9525606c9a" }, { "Day": "", "Time": "16:50", "coefficient": 0, "day": "0", "executeTime": "2024-07-03T08:50:34.213Z", "roomCategoryClusterId": "1806952480904552450", "_key": "7de3c254-0bf9-44b0-a8a2-4ceff698e18a" } ], "rows": [ { "dimensionKey": "Time", "title": "时间段", "headerStyle": { "textStick": true, "bgColor": "#fff", "color": "#606266", "fontSize": 14, "borderColor": "#ebeef5" }, "textStyle": { "bgColor": "#fff", "color": "#606266", "fontSize": 14, "borderColor": "#ebeef5" }, "width": "auto", "dropDownMenu": [ { "menuKey": "del-time", "text": "删除" } ] } ], "corner": { "titleOnDimension": "row", "headerStyle": { "textStick": true, "bgColor": "#fff", "color": "#606266", "fontSize": 14, "borderColor": "#ebeef5" }, "textStyle": { "bgColor": "#fff", "color": "#606266", "fontSize": 14, "borderColor": "#ebeef5" } }, "indicators": [ { "indicatorKey": "1725420560616787970", "title": "测试房源分组1", "width": "auto", "showSort": false, "headerStyle": { "fontWeight": "normal", "fontSize": 14, "textStick": true }, "style": { "padding": [ 10, 15, 10, 15 ] }, "dropDownMenu": [ { "menuKey": "del", "text": "删除" } ] }, { "indicatorKey": "1725421011508662274", "title": "测试房源分组2", "width": "auto", "showSort": false, "headerStyle": { "fontWeight": "normal", "fontSize": 14, "textStick": true }, "style": { "padding": [ 10, 15, 10, 15 ] }, "dropDownMenu": [ { "menuKey": "del", "text": "删除" } ] }, { "indicatorKey": "1806951784658468866", "title": "OTA结算价模式", "width": "auto", "showSort": false, "headerStyle": { "fontWeight": "normal", "fontSize": 14, "textStick": true }, "style": { "padding": [ 10, 15, 10, 15 ] }, "dropDownMenu": [ { "menuKey": "del", "text": "删除" } ] }, { "indicatorKey": "1806952135168065538", "title": "佣金模式", "width": "auto", "showSort": false, "headerStyle": { "fontWeight": "normal", "fontSize": 14, "textStick": true }, "style": { "padding": [ 10, 15, 10, 15 ] }, "dropDownMenu": [ { "menuKey": "del", "text": "删除" } ] }, { "indicatorKey": "1806952480904552450", "title": "PMS结算价模式", "width": "auto", "showSort": false, "headerStyle": { "fontWeight": "normal", "fontSize": 14, "textStick": true }, "style": { "padding": [ 10, 15, 10, 15 ] }, "dropDownMenu": [ { "menuKey": "del", "text": "删除" } ] } ], "enableDataAnalysis": true, "editor": "input-editor", "editCellTrigger": "click", "widthMode": "standard", "heightMode": "autoHeight", "select": { "disableSelect": 1 }, "hover": { "highlightMode": "row" }, "allowFrozenColCount": 2, "showFrozenIcon": false, "columnResizeMode": "none", "autoFillWidth": true, "theme": { "_defaultStyle": { "fontSize": 16, "fontFamily": "Arial,sans-serif", "bgColor": "#ECF1F5", "color": "#000", "borderColor": "#E1E4E8", "borderLineWidth": 1, "borderLineDash": [], "padding": [ 10, 16, 10, 16 ], "textAlign": "left", "textBaseline": "middle", "textOverflow": "ellipsis", "autoWrapText": false, "lineClamp": "auto", "linkColor": "#3772ff", "cursor": "auto", "marked": false, "underline": false, "lineThrough": false }, "_header": { "fontSize": 16, "fontFamily": "Arial,sans-serif", "fontWeight": "bold", "bgColor": "#ECF1F5", "color": "#000", "borderColor": "#E1E4E8", "borderLineWidth": 1, "borderLineDash": [], "hover": { "cellBgColor": "#CCE0FF", "inlineColumnBgColor": "#F3F8FF", "inlineRowBgColor": "#F3F8FF" }, "select": { "inlineColumnBgColor": "rgba(26, 26, 255, 0.1)", "inlineRowBgColor": "rgba(26, 26, 255, 0.1)" }, "padding": [ 10, 16, 10, 16 ], "textAlign": "left", "textBaseline": "middle", "textOverflow": "ellipsis", "autoWrapText": false, "lineClamp": "auto", "linkColor": "#3772ff", "cursor": "auto", "marked": false, "underline": false, "lineThrough": false }, "_cornerHeader": { "fontSize": 16, "fontFamily": "Arial,sans-serif", "fontWeight": "bold", "bgColor": "#ECF1F5", "color": "#000", "borderColor": "#E1E4E8", "borderLineWidth": 1, "borderLineDash": [], "select": { "inlineColumnBgColor": "rgba(26, 26, 255, 0.1)", "inlineRowBgColor": "rgba(26, 26, 255, 0.1)" }, "padding": [ 10, 16, 10, 16 ], "textAlign": "left", "textBaseline": "middle", "textOverflow": "ellipsis", "autoWrapText": false, "lineClamp": "auto", "linkColor": "#3772ff", "cursor": "auto", "marked": false, "underline": false, "lineThrough": false }, "_cornerRightTopCell": null, "_cornerLeftBottomCell": null, "_cornerRightBottomCell": null, "_rightFrozen": null, "_bottomFrozen": null, "_rowHeader": { "fontSize": 16, "fontFamily": "Arial,sans-serif", "fontWeight": "bold", "bgColor": "#ECF1F5", "color": "#000", "borderColor": "#E1E4E8", "borderLineWidth": 1, "borderLineDash": [], "hover": { "cellBgColor": "#CCE0FF", "inlineColumnBgColor": "#F3F8FF", "inlineRowBgColor": "#F3F8FF" }, "select": { "inlineColumnBgColor": "rgba(26, 26, 255, 0.1)", "inlineRowBgColor": "rgba(26, 26, 255, 0.1)" }, "padding": [ 10, 16, 10, 16 ], "textAlign": "left", "textBaseline": "middle", "textOverflow": "ellipsis", "autoWrapText": false, "lineClamp": "auto", "linkColor": "#3772ff", "cursor": "auto", "marked": false, "underline": false, "lineThrough": false }, "_body": { "fontSize": 14, "fontFamily": "Arial,sans-serif", "color": "#000", "borderColor": "#E1E4E8", "borderLineWidth": 1, "borderLineDash": [], "hover": { "cellBgColor": "#CCE0FF", "inlineColumnBgColor": "#F3F8FF", "inlineRowBgColor": "#F3F8FF" }, "select": { "inlineColumnBgColor": "rgba(26, 26, 255, 0.1)", "inlineRowBgColor": "rgba(26, 26, 255, 0.1)" }, "padding": [ 10, 16, 10, 16 ], "textAlign": "left", "textBaseline": "middle", "textOverflow": "ellipsis", "autoWrapText": false, "lineClamp": "auto", "linkColor": "#3772ff", "cursor": "auto", "marked": false, "underline": false, "lineThrough": false }, "_scroll": { "scrollSliderColor": "#C0C0C0", "visible": "scrolling", "width": 7, "hoverOn": true, "barToSide": false }, "_tooltip": null, "_frameStyle": { "borderColor": "#ebeef5", "borderLineWidth": 1, "borderLineDash": [], "shadowBlur": 0, "shadowColor": "black", "shadowOffsetX": 0, "shadowOffsetY": 0, "cornerRadius": 0 }, "_columnResize": { "lineColor": "#416EFF", "bgColor": "#D9E2FF", "lineWidth": 1, "width": 3, "labelColor": "#FFF", "labelFontSize": 10, "labelFontFamily": "sans-serif", "labelBackgroundFill": "#3073F2", "labelBackgroundCornerRadius": 5 }, "_dragHeaderSplitLine": { "lineColor": "blue", "lineWidth": 2, "shadowBlockColor": "rgba(204,204,204,0.3)" }, "_frozenColumnLine": { "shadow": { "width": 3, "startColor": "rgba(225, 228, 232, 0.6)", "endColor": "rgba(225, 228, 232, 0.6)" } }, "_selectionStyle": { "cellBgColor": "rgba(0, 0, 255,0.1)", "cellBorderColor": "#0000ff", "cellBorderLineWidth": 2 }, "_axisStyle": null, "_checkboxStyle": null, "_radioStyle": null, "_textPopTipStyle": { "visible": true, "position": "auto", "padding": 8, "titleStyle": { "fontSize": 12, "fontWeight": "bold", "fill": "#4E5969" }, "contentStyle": { "fontSize": 12, "fill": "#4E5969" }, "panel": { "visible": true, "fill": "#fff", "stroke": "#ffffff", "lineWidth": 0, "cornerRadius": 3, "shadowBlur": 12, "shadowOffsetX": 0, "shadowOffsetY": 4, "shadowColor": "rgba(0, 0, 0, 0.1)", "size": 0, "space": 12 } }, "isPivot": true, "internalTheme": { "obj": { "frameStyle": { "borderColor": "#ebeef5" } }, "superTheme": { "underlayBackgroundColor": "#FFF", "defaultStyle": { "borderColor": "#E1E4E8", "color": "#000", "bgColor": "#ECF1F5" }, "headerStyle": { "fontSize": 16, "fontWeight": "bold", "bgColor": "#ECF1F5", "hover": { "cellBgColor": "#CCE0FF", "inlineRowBgColor": "#F3F8FF", "inlineColumnBgColor": "#F3F8FF" } }, "rowHeaderStyle": { "fontSize": 16, "fontWeight": "bold", "bgColor": "#ECF1F5", "hover": { "cellBgColor": "#CCE0FF", "inlineRowBgColor": "#F3F8FF", "inlineColumnBgColor": "#F3F8FF" } }, "cornerHeaderStyle": { "fontSize": 16, "fontWeight": "bold" }, "bodyStyle": { "fontSize": 14, "hover": { "cellBgColor": "#CCE0FF", "inlineRowBgColor": "#F3F8FF", "inlineColumnBgColor": "#F3F8FF" } }, "frameStyle": { "borderColor": "#E1E4E8", "borderLineWidth": 1, "borderLineDash": [], "cornerRadius": 0, "shadowBlur": 0, "shadowOffsetX": 0, "shadowOffsetY": 0, "shadowColor": "black" }, "columnResize": { "lineWidth": 1, "lineColor": "#416EFF", "bgColor": "#D9E2FF", "width": 3 }, "frozenColumnLine": { "shadow": { "width": 3, "startColor": "rgba(225, 228, 232, 0.6)", "endColor": "rgba(225, 228, 232, 0.6)" } }, "selectionStyle": { "cellBgColor": "rgba(0, 0, 255,0.1)", "cellBorderLineWidth": 2, "cellBorderColor": "#0000ff" }, "tooltipStyle": { "bgColor": "#FFF", "color": "#000", "fontSize": 12, "fontFamily": "Arial,sans-serif" } } } } } tableInstance = new VTable.PivotTable(document.getElementById(CONTAINER_ID), option); tableInstance.on('change_cell_value', arg => { console.log(arg); }); window['tableInstance'] = tableInstance; }); 透视框编辑的时候 靠近边框的时候点编辑 会把它顶出去

Current Behavior

正常的显示 image

不正常的情况 image 对比下就知道 它把左边顶出去了

Expected Behavior

希望能尽快修复 这个功能很重要 不行就体验很差

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

bug 还是很多啊 隔了很久没用 一重新用 就发现很多的bug，仍需努力啊