Open skie1997 opened 4 days ago
1.11.2-alpha.3
vscreen
react demo
// import * as ReactVTable from '@visactor/react-vtable'; const input_editor = new VTable_editors.InputEditor(); VTable.register.editor('input-editor', input_editor); VTable.register.icon('dragReorder', { type: 'svg', svg: '<svg t="1730689590784" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2460" width="200" height="200"><path d="M362.666667 192m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#666666" p-id="2461"></path><path d="M661.333333 192m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#666666" p-id="2462"></path><path d="M362.666667 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#666666" p-id="2463"></path><path d="M661.333333 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#666666" p-id="2464"></path><path d="M362.666667 832m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#666666" p-id="2465"></path><path d="M661.333333 832m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#666666" p-id="2466"></path></svg>', width: 10, height: 10, name: 'dragReorder', positionType: VTable.TYPES.IconPosition.left, marginRight: 0, funcType: VTable.TYPES.IconFuncTypeEnum.dragReorder, hover: { width: 10, height: 10, bgColor: 'rgba(101, 117, 168, 0.1)' }, cursor: 'move' }); VTable.register.icon('corner', { type: 'svg', svg: '<svg t="1731651606379" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3370" fill="#959da5"><path d="M65.669652 957.453375 955.946045 957.453375 955.946045 67.176982Z" p-id="3371"></path></svg>', width: 12, height: 12, name: 'corner', positionType: VTable.TYPES.IconPosition.right, visibleTime: 'always', cursor: 'pointer' }); const option = { "columns": [ { "title": "Province", "field": 0, "width": 98, "headerEditor": "input-editor" }, { "title": "Sales", "field": 1, "width": 98, "headerEditor": "input-editor" }, { "title": "Profit", "field": 2, "width": 98, "headerEditor": "input-editor" } ], "records": [ [ "河北", 20, 60 ], [ "山西", 50, 30 ], [ "内蒙古", 40, 50 ], [ "辽宁", 50, 10 ], [ "吉林", 35, 20 ] ], "dragHeaderMode": "column", "columnResizeMode": "all", "autoWrapText": true, "rowSeriesNumber": { "title": "", "dragOrder": true, "headerIcon": "corner", "width": 60, "headerStyle": { "fontSize": 12, "fontFamily": "PingFang SC", "padding": 2, "textAlign": "center", "borderColor": "#eceef1", "bgColor": "#f6f8fa", "color": "#1f2329", "autoWrapText": true }, "disableColumnResize": true, "style": { "fontSize": 12, "fontFamily": "PingFang SC", "padding": 2, "textAlign": "center", "borderColor": "#eceef1", "bgColor": "#f6f8fa", "color": "#1f2329", "autoWrapText": true } }, "defaultRowHeight": 22, "defaultHeaderRowHeight": 24, "editor": "input-editor", "select": { "outsideClickDeselect": true, "headerSelectMode": "body" }, "theme": { "bodyStyle": { "fontSize": 12, "fontFamily": "PingFang SC", "padding": 2, "textAlign": "center", "borderColor": "#eceef1", "color": "#1f2329", "select": { "cellBgColor": "#c2defc", "inlineRowBgColor": "#F3F8FF", "inlineColumnBgColor": "rgba(0,100,250,.16)", "cellBorderColor": "#3073f2", "cellBorderLineWidth": 1 } }, "headerStyle": { "fontSize": 12, "fontFamily": "PingFang SC", "padding": 2, "textAlign": "center", "borderColor": "#eceef1", "bgColor": "#f6f8fa", "color": "#1f2329", "click": { "cellBgColor": "#c2defc", "inlineRowBgColor": "#F3F8FF", "inlineColumnBgColor": "rgba(0,100,250,.16)", "cellBorderColor": "#3073f2", "cellBorderLineWidth": 1 } }, "selectionStyle": { "inlineRowBgColor": "rgba(0, 100, 250, 0.16)", "inlineColumnBgColor": "rgba(0, 100, 250, 0.16)", "cellBgColor": "rgba(0, 100, 250, 0.16)", "cellBorderColor": "#3073f2", "cellBorderLineWidth": 1 } }, "keyboardOptions": { "moveEditCellOnArrowKeys": true, "copySelected": true, "pasteValueToCell": true }, "customConfig": { "limitContentHeight": false }, "menu": {} } const root = ReactDom.createRoot(document.getElementById(CONTAINER_ID)); root.render(<ReactVTable.ListTable option={option} height={'500px'} />); // release openinula instance, do not copy window.customRelease = () => { root.unmount(); };
编辑列头 和 拖拽列序 不冲突
- OS: - Browser: - Framework:
No response
预计修复时间:11.29
Version
1.11.2-alpha.3
Link to Minimal Reproduction
vscreen
Steps to Reproduce
react demo
Current Behavior
Expected Behavior
编辑列头 和 拖拽列序 不冲突
Environment
Any additional comments?
No response