fix(table): 修正表格高度和宽度不精准问题
This commit is contained in:
parent
f8cd441ed8
commit
ea84a38096
|
@ -122,9 +122,10 @@ class Scrollbar extends EventEmitter2 {
|
|||
getWidth() {
|
||||
const element = this.container.get<HTMLElement>();
|
||||
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<HTMLElement>();
|
||||
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),
|
||||
|
|
|
@ -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;
|
||||
};
|
||||
|
||||
|
|
|
@ -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<HTMLTableElement>();
|
||||
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<Element>()!, 'height'),
|
||||
),
|
||||
width: removeUnit(
|
||||
getComputedStyle(trigger.get<Element>()!, '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<Element>()!, 'height'),
|
||||
),
|
||||
width: removeUnit(
|
||||
getComputedStyle(trigger.get<Element>()!, 'width'),
|
||||
),
|
||||
},
|
||||
element: row,
|
||||
width: -1,
|
||||
height: rowElement.offsetHeight,
|
||||
height: removeUnit(getComputedStyle(rowElement, 'height')),
|
||||
index,
|
||||
table: {
|
||||
width: this.table.selection.tableModel?.width || 0,
|
||||
|
|
|
@ -4,6 +4,7 @@ import {
|
|||
CardToolbarItemOptions,
|
||||
CardType,
|
||||
EDITABLE_SELECTOR,
|
||||
getComputedStyle,
|
||||
isEngine,
|
||||
isMobile,
|
||||
NodeInterface,
|
||||
|
@ -868,8 +869,17 @@ class TableComponent<V extends TableValue = TableValue>
|
|||
}
|
||||
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<Element>()!,
|
||||
'height',
|
||||
),
|
||||
),
|
||||
);
|
||||
});
|
||||
this.conltrollBar.refresh();
|
||||
this.scrollbar?.refresh();
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue