diff --git a/io.sc.platform.core.frontend/src/platform/components/grid/ts/function/Operator.ts b/io.sc.platform.core.frontend/src/platform/components/grid/ts/function/Operator.ts index d7fe860a..9c706711 100644 --- a/io.sc.platform.core.frontend/src/platform/components/grid/ts/function/Operator.ts +++ b/io.sc.platform.core.frontend/src/platform/components/grid/ts/function/Operator.ts @@ -325,36 +325,38 @@ export class Operator extends Base { } }, time); - tableElement.getElementsByTagName('table')[0].style.setProperty('--tableHeadBgColor', this.table?.color.headBgColor); - tableElement.getElementsByTagName('table')[0].style.setProperty('--stickyBgColor', this.table?.color.stickyBgColor); - tableElement.getElementsByTagName('table')[0].style.setProperty('--tableBorderColor', this.table?.color.borderColor); - tableElement.getElementsByTagName('table')[0].style.setProperty('--tableColumnTitleHeight', (this.tools?.cm.denseHeader.value ? 28 : 48) + 'px'); - let headerPadding = '8px'; - if (this.tools?.cm.denseHeader) { - headerPadding = '4px'; - } - tableElement.getElementsByTagName('table')[0].style.setProperty('--tableHeaderPadding', headerPadding); - let bodyPadding = '8px'; - if (this.tools?.cm.denseBody) { - bodyPadding = '4px'; - } - tableElement.getElementsByTagName('table')[0].style.setProperty('--tableBodyPadding', bodyPadding); - tableElement.getElementsByTagName('table')[0].style.setProperty('--tableBodyHeight', (this.tools?.cm.denseBody.value ? 24 : 48) + 'px'); - nextTick(() => { - if (this.tools?.cm.denseBody.value && !this.props.hideBottom) { - if (tableElement.getElementsByClassName('q-table__bottom').length > 0) { - tableElement.getElementsByClassName('q-table__bottom')[0].style.setProperty('--tableBottomHeight', 33 + 'px'); - tableElement.getElementsByClassName('q-table__bottom')[0].style.setProperty('--tableBottomButtonHeight', 24 + 'px'); + if (tableElement) { + tableElement.getElementsByTagName('table')[0].style.setProperty('--tableHeadBgColor', this.table?.color.headBgColor); + tableElement.getElementsByTagName('table')[0].style.setProperty('--stickyBgColor', this.table?.color.stickyBgColor); + tableElement.getElementsByTagName('table')[0].style.setProperty('--tableBorderColor', this.table?.color.borderColor); + tableElement.getElementsByTagName('table')[0].style.setProperty('--tableColumnTitleHeight', (this.tools?.cm.denseHeader.value ? 28 : 48) + 'px'); + let headerPadding = '8px'; + if (this.tools?.cm.denseHeader) { + headerPadding = '4px'; + } + tableElement.getElementsByTagName('table')[0].style.setProperty('--tableHeaderPadding', headerPadding); + let bodyPadding = '8px'; + if (this.tools?.cm.denseBody) { + bodyPadding = '4px'; + } + tableElement.getElementsByTagName('table')[0].style.setProperty('--tableBodyPadding', bodyPadding); + tableElement.getElementsByTagName('table')[0].style.setProperty('--tableBodyHeight', (this.tools?.cm.denseBody.value ? 24 : 48) + 'px'); + nextTick(() => { + if (this.tools?.cm.denseBody.value && !this.props.hideBottom) { + if (tableElement.getElementsByClassName('q-table__bottom').length > 0) { + tableElement.getElementsByClassName('q-table__bottom')[0].style.setProperty('--tableBottomHeight', 33 + 'px'); + tableElement.getElementsByClassName('q-table__bottom')[0].style.setProperty('--tableBottomButtonHeight', 24 + 'px'); + } + } else if (!this.props.hideBottom && tableElement.getElementsByClassName('q-table__bottom').length > 0) { + tableElement.getElementsByClassName('q-table__bottom')[0].style.setProperty('--tableBottomHeight', 50 + 'px'); + tableElement.getElementsByClassName('q-table__bottom')[0].style.setProperty('--tableBottomButtonHeight', 40 + 'px'); } - } else if (!this.props.hideBottom && tableElement.getElementsByClassName('q-table__bottom').length > 0) { - tableElement.getElementsByClassName('q-table__bottom')[0].style.setProperty('--tableBottomHeight', 50 + 'px'); - tableElement.getElementsByClassName('q-table__bottom')[0].style.setProperty('--tableBottomButtonHeight', 40 + 'px'); + }); + if (this.props.title || this.props.toolbarActions.length > 0 || this.props.configButton) { + tableElement.getElementsByClassName('q-table__top')[0].style.setProperty('--tableTopPadding', '8px'); + } else { + tableElement.getElementsByClassName('q-table__top')[0].style.setProperty('--tableTopPadding', '0px'); } - }); - if (this.props.title || this.props.toolbarActions.length > 0 || this.props.configButton) { - tableElement.getElementsByClassName('q-table__top')[0].style.setProperty('--tableTopPadding', '8px'); - } else { - tableElement.getElementsByClassName('q-table__top')[0].style.setProperty('--tableTopPadding', '0px'); } } } diff --git a/io.sc.platform.core.frontend/src/platform/components/panel/WCardPanel.vue b/io.sc.platform.core.frontend/src/platform/components/panel/WCardPanel.vue index fb1ee855..e480aaaf 100644 --- a/io.sc.platform.core.frontend/src/platform/components/panel/WCardPanel.vue +++ b/io.sc.platform.core.frontend/src/platform/components/panel/WCardPanel.vue @@ -6,7 +6,8 @@ - {{ label }} + {{ label }} +
diff --git a/io.sc.platform.core.frontend/src/platform/components/toolbar/WToolbar.vue b/io.sc.platform.core.frontend/src/platform/components/toolbar/WToolbar.vue index b5df96df..b0427044 100644 --- a/io.sc.platform.core.frontend/src/platform/components/toolbar/WToolbar.vue +++ b/io.sc.platform.core.frontend/src/platform/components/toolbar/WToolbar.vue @@ -50,13 +50,17 @@ watch( */ const calcButtonWidth = () => { // 将隐藏容器显示一次,以获取每个按钮实际显示时需要的宽度。 - hiddenContainerRef.value.style.display = 'block'; - nextTick(() => { - toolbar.setButtonWidth(buttonsRef.value.divRef); - // 还原隐藏容器 - hiddenContainerRef.value.style.display = 'none'; - buildButtons(); - }); + if (hiddenContainerRef.value) { + hiddenContainerRef.value.style.display = 'block'; + nextTick(() => { + if (buttonsRef.value?.divRef) { + toolbar.setButtonWidth(buttonsRef.value.divRef); + // 还原隐藏容器 + hiddenContainerRef.value.style.display = 'none'; + buildButtons(); + } + }); + } }; // 构建基础按钮与更多按钮