diff --git a/packages/engine/src/scrollbar/index.ts b/packages/engine/src/scrollbar/index.ts index 1f8f8e7f..ee85d3b0 100644 --- a/packages/engine/src/scrollbar/index.ts +++ b/packages/engine/src/scrollbar/index.ts @@ -122,9 +122,10 @@ class Scrollbar extends EventEmitter2 { getWidth() { const element = this.container.get(); if (!element) return 0; + const width = this.container.width(); const offsetWidth = this.#scroll?.getOffsetWidth - ? this.#scroll.getOffsetWidth(element.offsetWidth) - : element.offsetWidth; + ? this.#scroll.getOffsetWidth(width) + : width; return offsetWidth; } @@ -141,7 +142,7 @@ class Scrollbar extends EventEmitter2 { this.container.css('padding-bottom'), ); const scrollWidth = contentElement - ? contentElement.offsetWidth + sPLeft + sPRight + ? this.#content!.width() + sPLeft + sPRight : element.scrollWidth; const scrollHeight = contentElement ? contentElement.offsetHeight + sPTop + sPBottom @@ -164,7 +165,7 @@ class Scrollbar extends EventEmitter2 { const display = this.oWidth - sPLeft - sPRight === this.sWidth || (contentElement && - contentElement.offsetWidth <= + this.#content!.width() <= this.oWidth - sPLeft - sPRight) ? 'none' : 'block'; @@ -190,13 +191,13 @@ class Scrollbar extends EventEmitter2 { this.x && contentElement && element.scrollWidth - sPLeft - sPRight > - contentElement.offsetWidth + this.#content!.width() ) { let left = element.scrollWidth - sPLeft - sPRight - - contentElement.offsetWidth; + this.#content!.width(); if (this.#scroll) { const { onScrollX, getScrollLeft } = this.#scroll; @@ -295,9 +296,10 @@ class Scrollbar extends EventEmitter2 { : 'down'; const containerElement = this.container.get(); if (!containerElement) return; + const width = this.container.width(); const containerWidth = this.#scroll?.getOffsetWidth - ? this.#scroll.getOffsetWidth(containerElement.offsetWidth) - : containerElement.offsetWidth; + ? this.#scroll.getOffsetWidth(width) + : width; const step = Math.max( containerWidth / (isMacos ? 20 - Math.abs(event.wheelDelta) : 8), diff --git a/packages/engine/src/utils/string.ts b/packages/engine/src/utils/string.ts index e61ade71..40406136 100644 --- a/packages/engine/src/utils/string.ts +++ b/packages/engine/src/utils/string.ts @@ -189,8 +189,8 @@ export const addUnit = (value: string | number, unit: string = 'px') => { */ export const removeUnit = (value: string) => { let match; - return value && (match = /^(-?\d+)/.exec(value)) - ? parseInt(match[1], 10) + return value && (match = /^((-?\d+)(\.\d+)?)/.exec(value)) + ? parseFloat(match[1]) : 0; }; diff --git a/plugins/table/src/component/controllbar.ts b/plugins/table/src/component/controllbar.ts index 098aa6e2..1b3991f0 100644 --- a/plugins/table/src/component/controllbar.ts +++ b/plugins/table/src/component/controllbar.ts @@ -11,6 +11,7 @@ import { $, CardActiveTrigger, EditorInterface, + getComputedStyle, isEngine, isHotkey, isMobile, @@ -129,7 +130,7 @@ class ControllBar extends EventEmitter2 implements ControllBarInterface { end = end || trs?.length || 0; const rowBars = this.rowsHeader?.find(Template.ROWS_HEADER_ITEM_CLASS); for (let i = start; i < end; i++) { - rowBars?.eq(i)?.css('height', `${trs[i].offsetHeight}px`); + rowBars?.eq(i)?.css('height', getComputedStyle(trs[i], 'height')); } const rowTrigger = this.rowsHeader?.find( Template.ROWS_HEADER_TRIGGER_CLASS, @@ -146,7 +147,7 @@ class ControllBar extends EventEmitter2 implements ControllBarInterface { renderColBars() { const table = this.tableRoot?.get(); if (!table) return; - const tableWidth = table.offsetWidth; + const tableWidth = removeUnit(getComputedStyle(table, 'width')); //列删除按钮 this.colDeleteButton?.removeAllEvents(); this.colDeleteButton = this.table.wrapper?.find( @@ -204,7 +205,7 @@ class ControllBar extends EventEmitter2 implements ControllBarInterface { const colWidth = $(col).attributes('width'); if (colWidth) { colWidthArray[i] = colWidth; - allColWidth += parseInt(colWidth); + allColWidth += parseFloat(colWidth); isInit = false; } else { colIndex++; @@ -224,7 +225,9 @@ class ControllBar extends EventEmitter2 implements ControllBarInterface { !tdModel.isMulti && tdModel.element ) { - tdWidth[c] = tdModel.element.offsetWidth; + tdWidth[c] = removeUnit( + getComputedStyle(tdModel.element, 'width'), + ); } }); }); @@ -250,9 +253,7 @@ class ControllBar extends EventEmitter2 implements ControllBarInterface { cols.eq(i)?.attributes('width', width); } } else if (colIndex) { - const averageWidth = Math.round( - (tableWidth - allColWidth) / colIndex, - ); + const averageWidth = (tableWidth - allColWidth) / colIndex; cols.each((_, index) => { const width = undefined === colWidthArray[index] @@ -263,9 +264,7 @@ class ControllBar extends EventEmitter2 implements ControllBarInterface { }); } else { cols.each((_, index) => { - const width = Math.round( - (tableWidth * colWidthArray[index]) / allColWidth, - ); + const width = (tableWidth * colWidthArray[index]) / allColWidth; colBars.eq(index)?.css('width', width + 'px'); cols.eq(index)?.attributes('width', width); }); @@ -654,11 +653,15 @@ class ControllBar extends EventEmitter2 implements ControllBarInterface { this.changeSize = { trigger: { element: trigger, - height: trigger.height(), - width: trigger.width(), + height: removeUnit( + getComputedStyle(trigger.get()!, 'height'), + ), + width: removeUnit( + getComputedStyle(trigger.get()!, 'width'), + ), }, element: col, - width: colElement.offsetWidth, + width: removeUnit(getComputedStyle(colElement, 'width')), height: -1, index, table: { @@ -694,12 +697,16 @@ class ControllBar extends EventEmitter2 implements ControllBarInterface { this.changeSize = { trigger: { element: trigger, - height: trigger.height(), - width: trigger.width(), + height: removeUnit( + getComputedStyle(trigger.get()!, 'height'), + ), + width: removeUnit( + getComputedStyle(trigger.get()!, 'width'), + ), }, element: row, width: -1, - height: rowElement.offsetHeight, + height: removeUnit(getComputedStyle(rowElement, 'height')), index, table: { width: this.table.selection.tableModel?.width || 0, diff --git a/plugins/table/src/component/index.ts b/plugins/table/src/component/index.ts index 578110a2..60c8a3b0 100644 --- a/plugins/table/src/component/index.ts +++ b/plugins/table/src/component/index.ts @@ -4,6 +4,7 @@ import { CardToolbarItemOptions, CardType, EDITABLE_SELECTOR, + getComputedStyle, isEngine, isMobile, NodeInterface, @@ -868,8 +869,17 @@ class TableComponent } const rowElements = table.find('tr').toArray(); rowElements.forEach((rowElement, index) => { - const height = rowElement.css('height'); - rowItems.eq(index)?.css('height', height); + rowItems + .eq(index) + ?.css( + 'height', + removeUnit( + getComputedStyle( + rowElement.get()!, + 'height', + ), + ), + ); }); this.conltrollBar.refresh(); this.scrollbar?.refresh(); diff --git a/plugins/table/src/index.css b/plugins/table/src/index.css index a48338a2..3d4943ca 100644 --- a/plugins/table/src/index.css +++ b/plugins/table/src/index.css @@ -252,7 +252,7 @@ div[data-card-key="table"].card-selected .data-table, div[data-card-key="table"] .table-wrapper .table-rows-header { position: absolute; left: -13px; - top: 42px; + top: 41px; width: 14px; z-index: 128; border-right: 0; @@ -277,9 +277,9 @@ div[data-card-key="table"].card-selected .data-table, div[data-card-key="table"] background-color: #e2e4e6; } -.table-wrapper .table-rows-header .table-rows-header-item:nth-child(3) { +/* .table-wrapper .table-rows-header .table-rows-header-item:nth-child(3) { border-top: 0 none; -} +} */ .table-wrapper .table-rows-header .table-rows-header-item:last-child{ border-bottom: 1px solid #dfdfdf;