fix(table): 修复 table 展示问题 (#931)

uiwjs · Dec 10, 2022 · 52b27f1 · 52b27f1
1 parent c17a641
commit 52b27f1
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 14 deletions.
diff --git a/packages/react-table/README.md b/packages/react-table/README.md
@@ -22,7 +22,7 @@ import { Table, Button } from 'uiw';
 const columns = [
   {
     // title: '姓名',
-    ellipsis: true, 
+    ellipsis: true,
     title: ({ key }) => {
       return (
         <span>字段: {key}</span>
@@ -59,7 +59,7 @@ const dataSource = [
 ];
 const Demo = () => (
   <div>
-    <Table columns={columns} data={dataSource} />
+    <Table bordered columns={columns} data={dataSource} />
   </div>
 );
 export default Demo
@@ -810,8 +810,7 @@ import { Table, Button } from 'uiw';
 const columns = [
   {
     // title: '姓名',
-    ellipsis: true, 
-    width: 1000,
+    ellipsis: true,
     title: ({ key }) => {
       return (
         <span>字段: {key}</span>
@@ -849,7 +848,7 @@ const dataSource = [
 const Demo = () => (
   <div>
     <Table 
-      scroll={{x: 1800, y: 100}}
+      scroll={{x: 1800, y: 300}}
       footer={<div style={{height: 20, }}>这个是footer</div>}
       columns={columns} data={dataSource} 
     />
@@ -873,18 +872,18 @@ const columns = [
     title: '姓名',
     ellipsis: true, 
     // fixed: true,
-    width: 50,
+    width: 400,
     key: 'name', 
   }, {
     // fixed: true,
     title: '年龄',
-    width: 50,
     style: { color: 'red' },
+    width: 400,
     key: 'age',
   }, {
     title: '地址',
-    width: 50,
     key: 'info',
+    width: 400,
   }, {
     title: '操作',
     key: 'edit',

diff --git a/packages/react-table/src/TableTr.tsx b/packages/react-table/src/TableTr.tsx
@@ -82,6 +82,7 @@ export default function TableTr<T extends { [key: string]: any }>(props: TableTr
     <React.Fragment>
       {data.map((trData, rowNum) => {
         const key = rowKey ? trData[rowKey] : rowNum;
+        let rightFixedNum = 0;
         return (
           <React.Fragment key={rowNum}>
             <tr key={key}>
@@ -115,7 +116,9 @@ export default function TableTr<T extends { [key: string]: any }>(props: TableTr
                 }
                 if (keyName.fixed) {
                   if (keyName.fixed === 'right') {
-                    objs.className = `${prefixCls}-fixed-right`;
+                    rightFixedNum = rightFixedNum + 1;
+                    const cls = rightFixedNum === 1 ? `${prefixCls}-fixed-right-first` : '';
+                    objs.className = `${prefixCls}-fixed-right ${cls}`;
                   } else {
                     objs.className = `${prefixCls}-fixed-true`;
                   }

diff --git a/packages/react-table/src/ThComponent.tsx b/packages/react-table/src/ThComponent.tsx
@@ -4,6 +4,7 @@ import { locationFixed } from './util';
 
 interface ThComponentProps<T> {
   colNum: number;
+  rightNum: number;
   item: TableColumns<T>;
   prefixCls: string;
   titleNode: JSX.Element;
@@ -24,12 +25,13 @@ export default class ThComponent<T> extends Component<ThComponentProps<T>> {
   }
 
   render() {
-    const { colNum, prefixCls, item, titleNode, onCellHead, rowNum, locationWidth } = this.props;
+    const { colNum, rightNum, prefixCls, item, titleNode, onCellHead, rowNum, locationWidth } = this.props;
     const { title, key, render, children, ellipsis, fixed = false, ...thProps } = item;
     let cls = '';
     if (fixed) {
       if (fixed === 'right') {
-        cls = prefixCls + '-fixed-right';
+        const rightCls = rightNum === 1 ? `${prefixCls}-fixed-right-first` : '';
+        cls = prefixCls + '-fixed-right ' + rightCls;
       } else {
         cls = prefixCls + '-fixed-true';
       }

diff --git a/packages/react-table/src/Thead.tsx b/packages/react-table/src/Thead.tsx
@@ -25,6 +25,7 @@ export default function TheadComponent<T extends { [key: string]: V }, V>(
     updateLocation,
     ...other
   } = props;
+  let rightFixedNum = 0;
   return (
     <thead className={[prefixCls, className].filter(Boolean).join(' ').trim()} {...other}>
       {data &&
@@ -41,9 +42,13 @@ export default function TheadComponent<T extends { [key: string]: V }, V>(
               if (thProps.colSpan === 0) {
                 return null;
               }
+              if (fixed === 'right') {
+                rightFixedNum = rightFixedNum + 1;
+              }
               return (
                 <ThComponentProps
                   colNum={colNum}
+                  rightNum={rightFixedNum}
                   item={item}
                   key={colNum}
                   prefixCls={prefixCls}

diff --git a/packages/react-table/src/style/index.less b/packages/react-table/src/style/index.less
@@ -1,10 +1,12 @@
 @table-prefix: ~'w-table';
 
 .@{table-prefix} {
+  width: 100%;
+  overflow: auto;
   > table {
     display: table !important;
     margin: 0 !important;
-    width: 100%;
+    // width: 100% !important;
     border-spacing: 0;
     border-collapse: collapse;
     tr > th,
@@ -92,8 +94,15 @@
     content: '';
     pointer-events: none;
   }
+  &-fixed-true::before {
+    content: '';
+    position: absolute;
+    left: -1px;
+    top: 0;
+    bottom: 0;
+    border-left: 1px solid #dfe2e5;
+  }
   &-fixed-right::after {
-    box-shadow: inset -10px 0 8px -8px rgb(0 0 0 / 15%);
     position: absolute;
     top: 0;
     bottom: -1px;
@@ -105,6 +114,17 @@
     pointer-events: none;
     border-right: 1px solid #f0f0f0;
   }
+  &-fixed-right-first::after {
+    box-shadow: inset -10px 0 8px -8px rgb(0 0 0 / 15%);
+  }
+  &-fixed-right::before {
+    content: '';
+    position: absolute;
+    right: -1px;
+    top: 0;
+    bottom: 0;
+    border-right: 1px solid #dfe2e5;
+  }
   &-bordered {
     > table {
       tr > th,

diff --git a/website/src/components/Markdown/Markdown.tsx b/website/src/components/Markdown/Markdown.tsx
@@ -4,6 +4,7 @@ import { getMetaId, isMeta, getURLParameters, CodeBlockData } from 'markdown-rea
 import MarkdownPreview from '@uiw/react-markdown-preview';
 import { CodeProps } from 'react-markdown/lib/ast-to-react';
 import Footer from './Footer';
+import styles from './index.module.less';
 
 /**
  *
@@ -59,6 +60,7 @@ export default function Markdown(props: MarkdownProps) {
   return (
     <Fragment>
       <MarkdownPreview
+        className={styles.markdownWrap}
         source={props.source || ''}
         disableCopy
         warpperElement={{

diff --git a/website/src/components/Markdown/index.module.less b/website/src/components/Markdown/index.module.less
@@ -28,3 +28,9 @@
     word-wrap: initial;
   }
 }
+
+.markdownWrap {
+  table {
+    width: 100% !important;
+  }
+}
diff --git a/website/src/layouts/BaseLayout.tsx b/website/src/layouts/BaseLayout.tsx
@@ -20,7 +20,7 @@ export default function Components(props: ComponentsProps) {
     <Layout className={styles.layout}>
       {state.layout === 'top' ? (
         <Fragment>
-          <Affix offsetTop={0} style={{ zIndex: 999 }}>
+          <Affix offsetTop={0} style={{ zIndex: 999, width: '100%' }}>
             <Header style={{ display: 'flex', alignItems: 'center' }}>
               <Nav />
             </Header>