[Bug] 编辑框会把整个顶出去

[TryChai]

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

正常的显示

不正常的情况

对比下就知道 它把左边顶出去了

Expected Behavior

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

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

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