fix(table): table doest not show empty elements

script/utils/index.js

@@ -1,6 +1,6 @@
+const fs = require('fs');
 const path = require('path');
 const clc = require('cli-color');
-const fs = require('fs');
 
 function deleteFolderRecursive(path) {
   if (fs.existsSync(path)) {

src/table/hooks/useFixed.ts

@@ -416,9 +416,9 @@ export default function useFixed(
   };
 
   const updateThWidthListHandler = () => {
-    if (notNeedThWidthList.value) return;
     const timer = setTimeout(() => {
       updateTableWidth();
+      if (notNeedThWidthList.value) return;
       const thead = tableContentRef.value?.querySelector('thead');
       if (!thead) return;
       updateThWidthList(thead.children);
@@ -549,6 +549,7 @@ export default function useFixed(
   onMounted(() => {
     const scrollWidth = getScrollbarWidthWithCSS();
     scrollbarWidth.value = scrollWidth;
+    updateThWidthListHandler();
     const isWatchResize = isFixedColumn.value || isFixedHeader.value || !notNeedThWidthList.value || !data.value.length;
     // IE 11 以下使用 window resize；IE 11 以上使用 ResizeObserver
     if ((isWatchResize && getIEVersion() < 11) || typeof window.ResizeObserver === 'undefined') {

src/table/tbody.tsx

@@ -33,6 +33,7 @@ export interface TableBodyProps extends BaseTableProps {
 
 // table 到 body 的相同属性
 export const extendTableProps = [
+  'bordered',
   'rowKey',
   'rowClassName',
   'rowAttributes',
@@ -131,12 +132,13 @@ export default defineComponent({
     const renderEmpty = (h: CreateElement, columns: TableBodyProps['columns']) => {
       // 小于 100 属于异常宽度，不显示
       const showEmptyText = Boolean(this.tableWidth && this.tableWidth > 100) || process.env.NODE_ENV === 'test';
+      const tableWidth = this.bordered ? this.tableWidth - 2 : this.tableWidth;
       return (
         <tr class={[this.tableBaseClass.emptyRow, { [this.tableFullRowClasses.base]: this.isWidthOverflow }]}>
           <td colspan={columns.length}>
             <div
               class={[this.tableBaseClass.empty, { [this.tableFullRowClasses.innerFullRow]: this.isWidthOverflow }]}
-              style={this.isWidthOverflow ? { width: `${this.tableWidth}px` } : {}}
+              style={this.isWidthOverflow ? { width: `${tableWidth}px` } : {}}
             >
               {showEmptyText ? this.renderTNode('empty') || this.t(this.global.empty) : ''}
             </div>
@@ -156,13 +158,14 @@ export default defineComponent({
       if (['', null, undefined, false].includes(fullRowNode)) return null;
       // const isFixedToLeft = this.isWidthOverflow && this.columns.find((col) => col.fixed === 'left');
       const classes = [this.tableFullRowClasses.base, this.tableFullRowClasses[tType]];
+      const tableWidth = this.bordered ? this.tableWidth - 2 : this.tableWidth;
       /** innerFullRow 和 innerFullElement 同时存在，是为了保证 固定列时，当前行不随内容进行横向滚动 */
       return (
         <tr class={classes}>
           <td colspan={columnLength}>
             <div
               class={{ [this.tableFullRowClasses.innerFullRow]: this.isFixedToLeft }}
-              style={this.isFixedToLeft ? { width: `${this.tableWidth}px` } : {}}
+              style={this.isFixedToLeft ? { width: `${tableWidth}px` } : {}}
             >
               <div class={this.tableFullRowClasses.innerFullElement}>{fullRowNode}</div>
             </div>

vitest.config.js

@@ -1,5 +1,5 @@
-import { defineConfig } from 'vite';
 import path from 'path';
+import { defineConfig } from 'vite';
 import { createVuePlugin } from 'vite-plugin-vue2';
 import ScriptSetup from 'unplugin-vue2-script-setup/vite';