Merge pull request #12698 from dataease/pr@dev-v2@fix_table_full_width_scroll

fix(图表): 表格铺满之后出现滚动条 #12461

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

@@ -1,5 +1,6 @@
 import {
   type LayoutResult,
+  S2DataConfig,
   S2Event,
   S2Options,
   TableColCell,
@@ -129,7 +130,7 @@ export class TableInfo extends S2ChartView<TableSheet> {
     // 空值处理
     const newData = this.configEmptyDataStrategy(chart)
     // data config
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         columns: columns
       },
@@ -138,27 +139,26 @@ export class TableInfo extends S2ChartView<TableSheet> {
     }
 
     const customAttr = parseJson(chart.customAttr)
-    const style = this.configStyle(chart)
-    // 自适应列宽模式下，URL 字段的宽度固定为 120
-    if (customAttr.basicStyle.tableColumnMode === 'adapt') {
-      const urlFields = fields.filter(field => field.deType === 7)
-      style.colCfg.widthByFieldValue = urlFields?.reduce((p, n) => {
-        p[n.chartShowName ?? n.name] = 120
-        return p
-      }, {})
-    }
     // options
     const s2Options: S2Options = {
-      width: containerDom.offsetWidth,
+      width: containerDom.getBoundingClientRect().width,
       height: containerDom.offsetHeight,
       showSeriesNumber: customAttr.tableHeader.showIndex,
-      style,
       conditions: this.configConditions(chart),
       tooltip: {
         getContainer: () => containerDom,
         renderTooltip: sheet => new SortTooltip(sheet)
       }
     }
+    s2Options.style = this.configStyle(chart, s2DataConfig)
+    // 自适应列宽模式下，URL 字段的宽度固定为 120
+    if (customAttr.basicStyle.tableColumnMode === 'adapt') {
+      const urlFields = fields.filter(field => field.deType === 7)
+      s2Options.style.colCfg.widthByFieldValue = urlFields?.reduce((p, n) => {
+        p[n.chartShowName ?? n.name] = 120
+        return p
+      }, {})
+    }
     if (customAttr.tableCell.tableFreeze) {
       s2Options.frozenColCount = customAttr.tableCell.tableColumnFreezeHead ?? 0
       s2Options.frozenRowCount = customAttr.tableCell.tableRowFreezeHead ?? 0
@@ -240,7 +240,8 @@ export class TableInfo extends S2ChartView<TableSheet> {
         const totalWidthWithImg = ev.colLeafNodes.reduce((p, n) => {
           return p + (urlFields.includes(n.field) ? 120 : n.width)
         }, 0)
-        if (containerDom.offsetWidth <= totalWidthWithImg) {
+        const containerWidth = containerDom.getBoundingClientRect().width
+        if (containerWidth <= totalWidthWithImg) {
           // 图库计算的布局宽度已经大于等于容器宽度，不需要再扩大，不处理
           return
         }
@@ -248,14 +249,17 @@ export class TableInfo extends S2ChartView<TableSheet> {
         const totalWidthWithoutImg = ev.colLeafNodes.reduce((p, n) => {
           return p + (urlFields.includes(n.field) ? 0 : n.width)
         }, 0)
-        const restWidth = containerDom.offsetWidth - urlFields.length * 120
+        const restWidth = containerWidth - urlFields.length * 120
         const scale = restWidth / totalWidthWithoutImg
         const totalWidth = ev.colLeafNodes.reduce((p, n) => {
-          n.width = urlFields.includes(n.field) ? 120 : n.width * scale
+          n.width = urlFields.includes(n.field) ? 120 : Math.round(n.width * scale)
           n.x = p
           return p + n.width
         }, 0)
-        ev.colsHierarchy.width = Math.min(containerDom.offsetWidth, totalWidth)
+        if (totalWidth > containerWidth) {
+          ev.colLeafNodes[ev.colLeafNodes.length - 1].width -= totalWidth - containerWidth
+        }
+        ev.colsHierarchy.width = containerWidth
       })
     }
     // click

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

@@ -5,6 +5,7 @@ import { S2ChartView, S2DrawOptions } from '@/views/chart/components/js/panel/ty
 import { parseJson } from '@/views/chart/components/js/util'
 import {
   type LayoutResult,
+  S2DataConfig,
   S2Event,
   S2Options,
   SHAPE_STYLE_MAP,
@@ -118,28 +119,27 @@ export class TableNormal extends S2ChartView<TableSheet> {
     // 空值处理
     const newData = this.configEmptyDataStrategy(chart)
     // data config
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         columns: columns
       },
       meta: meta,
-      data: newData,
+      data: newData
-      style: this.configStyle(chart)
     }
 
     const customAttr = parseJson(chart.customAttr)
     // options
     const s2Options: S2Options = {
-      width: containerDom.offsetWidth,
+      width: containerDom.getBoundingClientRect().width,
       height: containerDom.offsetHeight,
       showSeriesNumber: customAttr.tableHeader.showIndex,
-      style: this.configStyle(chart),
       conditions: this.configConditions(chart),
       tooltip: {
         getContainer: () => containerDom,
         renderTooltip: sheet => new SortTooltip(sheet)
       }
     }
+    s2Options.style = this.configStyle(chart, s2DataConfig)
     if (customAttr.tableCell.tableFreeze) {
       s2Options.frozenColCount = customAttr.tableCell.tableColumnFreezeHead ?? 0
       s2Options.frozenRowCount = customAttr.tableCell.tableRowFreezeHead ?? 0
@@ -256,17 +256,22 @@ export class TableNormal extends S2ChartView<TableSheet> {
           newChart.store.set('lastLayoutResult', undefined)
           return
         }
-        const scale = containerDom.offsetWidth / ev.colsHierarchy.width
+        const containerWidth = containerDom.getBoundingClientRect().width
+        const scale = containerWidth / ev.colsHierarchy.width
         if (scale <= 1) {
           // 图库计算的布局宽度已经大于等于容器宽度，不需要再扩大，不处理
           return
         }
         const totalWidth = ev.colLeafNodes.reduce((p, n) => {
-          n.width = n.width * scale
+          n.width = Math.round(n.width * scale)
           n.x = p
           return p + n.width
         }, 0)
-        ev.colsHierarchy.width = Math.min(containerDom.offsetWidth, totalWidth)
+        if (totalWidth > containerWidth) {
+          // 从最后一列减掉
+          ev.colLeafNodes[ev.colLeafNodes.length - 1].width -= totalWidth - containerWidth
+        }
+        ev.colsHierarchy.width = containerWidth
       })
     }
     // click

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

@@ -11,7 +11,8 @@ import {
   VALUE_FIELD,
   QueryDataType,
   TotalStatus,
-  Aggregation
+  Aggregation,
+  S2DataConfig
 } from '@antv/s2'
 import { formatterItem, valueFormatter } from '../../../formatter'
 import { hexColorToRGBA, isAlphaColor, parseJson } from '../../../util'
@@ -239,7 +240,7 @@ export class TablePivot extends S2ChartView<PivotSheet> {
     // 空值处理
     const newData = this.configEmptyDataStrategy(chart)
     // data config
-    const s2DataConfig = {
+    const s2DataConfig: S2DataConfig = {
       fields: {
         rows: r,
         columns: c,
@@ -249,13 +250,9 @@ export class TablePivot extends S2ChartView<PivotSheet> {
       data: newData,
       sortParams: sortParams
     }
-    // options
-    const style = this.configStyle(chart)
-    style.hierarchyCollapse = true
     const s2Options: S2Options = {
       width: containerDom.offsetWidth,
       height: containerDom.offsetHeight,
-      style,
       totals: tableTotal as Totals,
       conditions: this.configConditions(chart),
       tooltip: {
@@ -264,7 +261,9 @@ export class TablePivot extends S2ChartView<PivotSheet> {
       hierarchyType: basicStyle.tableLayoutMode ?? 'grid',
       dataSet: spreadSheet => new CustomPivotDataset(spreadSheet)
     }
-
+    // options
+    s2Options.style = this.configStyle(chart, s2DataConfig)
+    s2Options.style.hierarchyCollapse = true
     // tooltip
     this.configTooltip(chart, s2Options)
     // 开始渲染

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

@@ -22,7 +22,8 @@ import {
   SERIES_NUMBER_FIELD,
   type PivotSheet,
   type Node,
-  type Meta
+  type Meta,
+  S2DataConfig
 } from '@antv/s2'
 import { keys, intersection, filter, cloneDeep, merge, find } from 'lodash-es'
 import { createVNode, render } from 'vue'
@@ -405,7 +406,7 @@ export function getCustomTheme(chart: Chart): S2Theme {
   return theme
 }
 
-export function getStyle(chart: Chart): Style {
+export function getStyle(chart: Chart, dataConfig: S2DataConfig): Style {
   const style: Style = {}
   let customAttr: DeepPartial<ChartAttr>
   if (chart.customAttr) {
@@ -441,18 +442,37 @@ export function getStyle(chart: Chart): Style {
             width: fieldMap[drillEnterField.dataeaseName]?.width
           }
         }
+        // 铺满
+        const totalWidthPercent = dataConfig.meta?.reduce((p, n) => {
+          return p + (fieldMap[n.field]?.width ?? 10)
+        }, 0)
+        const fullFilled = parseInt(totalWidthPercent.toFixed(0)) === 100
+        const widthArr = []
         style.colCfg.width = node => {
-          const width = node.spreadsheet.container.cfg.el.offsetWidth
+          const width = node.spreadsheet.container.cfg.el.getBoundingClientRect().width
           if (!basicStyle.tableFieldWidth?.length) {
             const fieldsSize = chart.data.fields.length
             const columnCount = tableHeader.showIndex ? fieldsSize + 1 : fieldsSize
             return width / columnCount
           }
           const baseWidth = width / 100
-          const resultWidth = fieldMap[node.field]
+          const tmpWidth = fieldMap[node.field]
             ? fieldMap[node.field].width * baseWidth
             : baseWidth * 10
-          return parseInt(resultWidth.toFixed(0))
+          const resultWidth = parseInt(tmpWidth.toFixed(0))
+          if (fullFilled) {
+            widthArr.push(resultWidth)
+            if (widthArr.length === dataConfig.meta.length - 1) {
+              const curTotalWidth = widthArr.reduce((p, n) => {
+                return p + n
+              }, 0)
+              const restWidth = width - curTotalWidth
+              if (restWidth < resultWidth) {
+                return restWidth
+              }
+            }
+          }
+          return resultWidth
         }
         break
       }

core/core-frontend/src/views/chart/components/js/panel/types/impl/s2.ts

@@ -10,7 +10,8 @@ import {
   S2Options,
   Meta,
   SERIES_NUMBER_FIELD,
-  setTooltipContainerStyle
+  setTooltipContainerStyle,
+  S2DataConfig
 } from '@antv/s2'
 import {
   configHeaderInteraction,
@@ -42,8 +43,8 @@ export abstract class S2ChartView<P extends SpreadSheet> extends AntVAbstractCha
     return getCustomTheme(chart)
   }
 
-  protected configStyle(chart: Chart): Style {
+  protected configStyle(chart: Chart, s2DataConfig: S2DataConfig): Style {
-    return getStyle(chart)
+    return getStyle(chart, s2DataConfig)
   }
 
   protected configEmptyDataStrategy(chart: Chart): Record<string, any>[] {