[fix] table empty elements does not displayed center (#3167)

* refactor(image): code improvement * fix(table): empty center * fix(table): empty elements width
Tencent · Jul 31, 2023 · 59e3adc · 59e3adc
1 parent 4702222
commit 59e3adc
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 13 deletions.
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
@@ -9,3 +9,4 @@ export * from './useKeepAnimation';
 export * from './useRipple';
 export * from './useVirtualScroll';
 export * from './useVModel';
+export * from './useImagePreviewUrl';
diff --git a/src/image-viewer/base/ImageItem.tsx b/src/image-viewer/base/ImageItem.tsx
@@ -1,4 +1,4 @@
-import { computed, defineComponent, ref, toRefs, watch } from 'vue';
+import { computed, defineComponent, PropType, ref, toRefs, watch } from 'vue';
 import { ImageErrorIcon } from 'tdesign-icons-vue-next';
 import { usePrefixClass } from '../../hooks/useConfig';
 import { useDrag } from '../hooks';
@@ -10,8 +10,8 @@ export default defineComponent({
     rotate: Number,
     scale: Number,
     mirror: Number,
-    src: [String, File],
-    placementSrc: [String, File],
+    src: [String, Object] as PropType<string | File>,
+    placementSrc: [String, Object] as PropType<string | File>,
   },
 
   setup(props) {

diff --git a/src/image-viewer/base/ImageViewerUtils.tsx b/src/image-viewer/base/ImageViewerUtils.tsx
@@ -1,11 +1,10 @@
 import { computed, defineComponent, PropType } from 'vue';
 import { ImageIcon, ZoomInIcon, ZoomOutIcon, DownloadIcon, MirrorIcon, RotationIcon } from 'tdesign-icons-vue-next';
-
 import TImageViewerIcon from './ImageModalIcon';
 import TToolTip from '../../tooltip';
 import { usePrefixClass } from '../../hooks/useConfig';
 import { downloadFile } from '../utils';
-import { useImagePreviewUrl } from '../../hooks/useImagePreviewUrl';
+import { useImagePreviewUrl } from '../../hooks';
 import { ImageInfo } from '../type';
 
 export default defineComponent({

diff --git a/src/image/__tests__/vitest-image.test.jsx b/src/image/__tests__/vitest-image.test.jsx
@@ -5,16 +5,12 @@
  * If you need to modify this file, contact PMC first please.
  */
 import { mount } from '@vue/test-utils';
-import { beforeEach, vi } from 'vitest';
+import { vi } from 'vitest';
 import { Image } from '..';
 import { getOverlayImageMount } from './mount';
 import { simulateImageEvent } from '@test/utils';
 
 describe('Image Component', () => {
-  beforeEach(() => {
-    File;
-  });
-
   it('props.alt works fine', () => {
     const wrapper = mount(<Image alt={'text image load failed'} src={'https://www.error.img.com'}></Image>).find('img');
     expect(wrapper.attributes('alt')).toBe('text image load failed');

diff --git a/src/image/image.tsx b/src/image/image.tsx
@@ -135,6 +135,7 @@ export default defineComponent({
     }
 
     function renderImage() {
+      // string | File
       const url = typeof imageStrSrc.value === 'string' ? imageStrSrc.value : previewUrl.value;
       return (
         <img

diff --git a/src/table/hooks/useFixed.ts b/src/table/hooks/useFixed.ts
@@ -415,9 +415,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);
@@ -542,6 +542,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') {

diff --git a/src/table/tbody.tsx b/src/table/tbody.tsx
@@ -32,6 +32,7 @@ export interface TableBodyProps extends BaseTableProps {
 
 // table 到 body 的相同属性
 export const extendTableProps = [
+  'bordered',
   'rowKey',
   'rowClassName',
   'rowAttributes',
@@ -106,12 +107,13 @@ export default defineComponent({
 
   render() {
     const renderEmpty = (columns: TableBodyProps['columns']) => {
+      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` } : {}}
             >
               {this.renderTNode('empty') || this.t(this.globalConfig.empty)}
             </div>
@@ -126,13 +128,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} key={`key-full-row-${type}`}>
           <td colspan={columnLength}>
             <div
               class={{ [this.tableFullRowClasses.innerFullRow]: isFixedToLeft }}
-              style={isFixedToLeft ? { width: `${this.tableWidth}px` } : {}}
+              style={isFixedToLeft ? { width: `${tableWidth}px` } : {}}
             >
               <div class={this.tableFullRowClasses.innerFullElement}>{fullRowNode}</div>
             </div>