fix: 数据表格宽度问题修复。（表格行高因此暂时失效，以后修复）

Author: ROYIANS

src/components/PageComponents/RoyTable/RoyComplexTable.vue

@@ -49,15 +49,18 @@
             >
               <table :style="`width: ${bodyTableWidth}px`">
                 <thead>
-                  <tr :style="`height: ${tableRowHeight}px`">
+                  <tr>
                     <th
                       v-for="(item, index) in tableCols"
                       :key="index"
                       :style="{
-                        width: `${item.width}px`
+                        width: `${item.width}px`,
+                        height: `${tableRowHeight}px`
                       }"
                     >
-                      {{ item.title }}
+                      <div style="display: inline; width: 100%">
+                        {{ item.title }}
+                      </div>
                     </th>
                   </tr>
                 </thead>

src/components/PageComponents/style.js

@@ -360,11 +360,26 @@ export const StyledComplexTable = styled('div', complexTableProps)`
   th {
     text-align: center;
     font-weight: bold;
-    padding: 2px;
+    padding: 0;
+    word-break: break-all;
   }
 
   td {
-    padding: 3px;
+    padding: 0;
+    word-break: break-all;
+    position: relative;
+  }
+
+  .roy-complex-table-cell-in {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    align-items: center;
+    display: flex;
   }
 
   .rendered-roy-complex-table__footer {

src/components/Viewer/auto-render.js

@@ -355,7 +355,8 @@ export class AutoRender {
     const { tables, overflowPages } = this.getTablesSplit(
       element.style,
       trElements,
-      thElement
+      thElement,
+      true
     )
     tables.forEach((table, index) => {
       if (index > 0) {
@@ -435,8 +436,18 @@ export class AutoRender {
     newElement = null
   }
 
-  getTablesSplit(style, rows, head = null) {
-    let headHeight = head == null ? 0 : head.clientHeight
+  getTablesSplit(style, rows, head = null, isDataTable = false) {
+    let headHeight = 0
+    if (isDataTable && head !== null) {
+      let innerCell = head.getElementsByClassName('roy-complex-table-cell-in')
+      for (let cell of innerCell) {
+        headHeight =
+          headHeight < cell.children[0].clientHeight
+            ? cell.children[0].clientHeight
+            : headHeight
+      }
+      head.children[0].style.height = `${headHeight}px`
+    }
     let headHtml = head == null ? '' : head.outerHTML
     let realTop = this.curPageUsedHeight || style.top
     let maxHeight = this.maxPageUseHeight - realTop
@@ -448,6 +459,19 @@ export class AutoRender {
     let maxTableWidth = 0
     for (let i = 0; i < rows.length; i++) {
       let curTd = rows[i]
+      if (isDataTable) {
+        let maxHeight = 0
+        let innerCell = curTd.getElementsByClassName(
+          'roy-complex-table-cell-in'
+        )
+        for (let cell of innerCell) {
+          maxHeight =
+            maxHeight < cell.children[0].clientHeight
+              ? cell.children[0].clientHeight
+              : maxHeight
+        }
+        curTd.style.height = `${maxHeight}px`
+      }
       let lastHeight = curHeight
       curHeight += curTd.clientHeight
       maxTableWidth =

src/components/Viewer/auto-table.js

@@ -106,23 +106,33 @@ export class AutoTable {
   }
 
   generateComplexTable() {
-    const { tableRowHeight, tableDataSource, tableCols, bodyTableWidth } =
-      this.propValue
+    const { tableDataSource, tableCols, bodyTableWidth } = this.propValue
     const tableData = this.dataSet[tableDataSource] || []
     const tableHead = tableCols
       .map((item) => {
-        return `<th style='width: ${item.width}px; height: ${tableRowHeight}px'>${item.title}</th>`
+        return `<th style='width: ${item.width}px;'>
+                  <div class="roy-complex-table-cell-in" style='justify-content: center;'>
+                    <div style='padding: 3px'>${item.title}</div>
+                  </div>
+                </th>`
       })
       .join('')
+    let widthList = tableCols.map((item) => {
+      return item.width
+    })
     const tableBody = tableData
       .map((row) => {
         let tdEle = tableCols
-          .map((col) => {
+          .map((col, index) => {
             const { field, formatter, align } = col
-            return `<td height="${tableRowHeight}px" style="text-align: ${align}">${RenderUtil.getDataWithTypeConvertedByDataSource(
-              row[field],
-              formatter
-            )}</td>`
+            return `<td style="width: ${widthList[index]}px;">
+                      <div class="roy-complex-table-cell-in" style='justify-content: ${align}'>
+                        <div style='padding: 3px'>${RenderUtil.getDataWithTypeConvertedByDataSource(
+                          row[field],
+                          formatter
+                        )}</div>
+                      </div>
+                    </td>`
           })
           .join('')
         return `<tr class="roy-complex-table-row">${tdEle}</tr>`