fix(图表): 修复表格自定义模式最右侧边框不显示

core/core-frontend/src/views/chart/components/js/panel/charts/table/table-info.ts

@@ -29,6 +29,7 @@ import {
   getRowIndex,
   getStartPosition,
   getSummaryRow,
+  reserveTableRightBorderWidth,
   isNumeric,
   SortTooltip,
   SummaryCell,
@@ -311,7 +312,7 @@ export class TableInfo extends S2ChartView<TableSheet> {
               n.x = getStartPosition(n)
             }
           })
-          ev.colsHierarchy.width = totalWidth
+          ev.colsHierarchy.width = totalWidth + 1
           newChart.store.set('lastLayoutResult', undefined)
           return
         }
@@ -359,6 +360,11 @@ export class TableInfo extends S2ChartView<TableSheet> {
         ev.colsHierarchy.width = containerWidth
       })
     }
+    if (basicStyle?.tableColumnMode === 'field') {
+      newChart.on(S2Event.LAYOUT_AFTER_HEADER_LAYOUT, (ev: LayoutResult) => {
+        reserveTableRightBorderWidth(ev, containerDom.getBoundingClientRect().width)
+      })
+    }
     // 空数据时表格样式
     configEmptyDataStyle(newChart, basicStyle, newData, container)
     // click

core/core-frontend/src/views/chart/components/js/panel/charts/table/table-normal.ts

@@ -13,7 +13,8 @@ import {
   calcTreeWidth,
   getStartPosition,
   isNumeric,
-  CustomTableColCell
+  CustomTableColCell,
+  reserveTableRightBorderWidth
 } from '@/views/chart/components/js/panel/common/common_table'
 import { S2ChartView, S2DrawOptions } from '@/views/chart/components/js/panel/types/impl/s2'
 import { parseJson } from '@/views/chart/components/js/util'
@@ -253,7 +254,7 @@ export class TableNormal extends S2ChartView<TableSheet> {
               n.x = getStartPosition(n)
             }
           })
-          ev.colsHierarchy.width = totalWidth
+          ev.colsHierarchy.width = totalWidth + 1
           newChart.store.set('lastLayoutResult', undefined)
           return
         }
@@ -290,6 +291,11 @@ export class TableNormal extends S2ChartView<TableSheet> {
         ev.colsHierarchy.width = containerWidth
       })
     }
+    if (basicStyle.tableColumnMode === 'field') {
+      newChart.on(S2Event.LAYOUT_AFTER_HEADER_LAYOUT, (ev: LayoutResult) => {
+        reserveTableRightBorderWidth(ev, containerDom.getBoundingClientRect().width)
+      })
+    }
     configEmptyDataStyle(newChart, basicStyle, newData, container)
     // click
     newChart.on(S2Event.DATA_CELL_CLICK, ev => {

core/core-frontend/src/views/chart/components/js/panel/common/common_table.ts

@@ -35,6 +35,7 @@ import {
   S2Event,
   S2Options,
   S2Theme,
+  type LayoutResult,
   SERIES_NUMBER_FIELD,
   EXTRA_FIELD,
   setTooltipContainerStyle,
@@ -660,6 +661,22 @@ export function getStyle(chart: Chart, dataConfig: S2DataConfig): Style {
   return style
 }
 
+export function reserveTableRightBorderWidth(ev: LayoutResult, containerWidth: number) {
+  if (!ev.colLeafNodes?.length) {
+    return
+  }
+  const totalWidth = ev.colLeafNodes.reduce((p, n) => p + n.width, 0)
+  if (totalWidth < containerWidth) {
+    return
+  }
+  const lastLeafNode = ev.colLeafNodes[ev.colLeafNodes.length - 1]
+  if (lastLeafNode.width <= 1) {
+    return
+  }
+  lastLeafNode.width -= 1
+  ev.colsHierarchy.width = totalWidth
+}
+
 export function getCurrentField(valueFieldList: Axis[], field: ChartViewField) {
   let list = []
   let res = null