refactor: table (#2473)

* feat(table): table新增自定义行 * feat(table): 解决文件导入问题 * refactor(table): cr调整 * refactor(table): cr调整 * refactor(table): 自定义行逻辑调整 --------- Co-authored-by: qinliuxiao1 <[email protected]>
jdf2e · Jul 25, 2024 · 86fe2fd · 86fe2fd
1 parent fc9a96e
commit 86fe2fd
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 38 deletions.
diff --git a/src/packages/table/demos/h5/demo14.tsx b/src/packages/table/demos/h5/demo14.tsx
@@ -29,20 +29,22 @@ const Demo14 = () => {
       text: '这里是自定义行',
       Component: (props: any) => {
         return (
-          <div style={{ height: props.height }}>
-            <div
-              style={{
-                position: 'absolute',
-                height: props.height,
-                width: '100%',
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                borderBottom:
-                  '1px solid var(--nutui-table-border-color, var(--nutui-black-3, rgba(0, 0, 0, 0.06)))',
-              }}
-            >
-              {props.text}
+          <div className="nut-table-main-body-tr">
+            <div style={{ height: props.height }}>
+              <div
+                style={{
+                  position: 'absolute',
+                  height: props.height,
+                  width: '100%',
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  borderBottom:
+                    '1px solid var(--nutui-table-border-color, var(--nutui-black-3, rgba(0, 0, 0, 0.06)))',
+                }}
+              >
+                {props.text}
+              </div>
             </div>
           </div>
         )

diff --git a/src/packages/table/demos/taro/demo14.tsx b/src/packages/table/demos/taro/demo14.tsx
@@ -29,20 +29,22 @@ const Demo14 = () => {
       text: '这里是自定义行',
       Component: (props: any) => {
         return (
-          <div style={{ height: props.height }}>
-            <div
-              style={{
-                position: 'absolute',
-                height: props.height,
-                width: '100%',
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                borderBottom:
-                  '1px solid var(--nutui-table-border-color, var(--nutui-black-3, rgba(0, 0, 0, 0.06)))',
-              }}
-            >
-              {props.text}
+          <div className="nut-table-main-body-tr">
+            <div style={{ height: props.height }}>
+              <div
+                style={{
+                  position: 'absolute',
+                  height: props.height,
+                  width: '100%',
+                  display: 'flex',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  borderBottom:
+                    '1px solid var(--nutui-table-border-color, var(--nutui-black-3, rgba(0, 0, 0, 0.06)))',
+                }}
+              >
+                {props.text}
+              </div>
             </div>
           </div>
         )

diff --git a/src/packages/table/table.taro.tsx b/src/packages/table/table.taro.tsx
@@ -125,10 +125,6 @@ export const Table: FunctionComponent<
   }
 
   const renderBodyTds = (item: any, rowIndex: number) => {
-    const { rowRender } = item
-    if (rowRender && typeof rowRender === 'function') {
-      return rowRender(item, rowIndex)
-    }
     return sortDataItem().map(([value, render]) => {
       return (
         <div
@@ -152,9 +148,14 @@ export const Table: FunctionComponent<
 
   const renderBodyTrs = () => {
     return innerValue.map((item, index) => {
+      const inner = renderBodyTds(item, index)
+      const { rowRender } = item
+      if (rowRender && typeof rowRender === 'function') {
+        return rowRender(item, index, { inner })
+      }
       return (
         <div className={bodyClassPrefix} key={index}>
-          {renderBodyTds(item, index)}
+          {inner}
         </div>
       )
     })

diff --git a/src/packages/table/table.tsx b/src/packages/table/table.tsx
@@ -122,10 +122,6 @@ export const Table: FunctionComponent<
   }
 
   const renderBodyTds = (item: any, rowIndex: number) => {
-    const { rowRender } = item
-    if (rowRender && typeof rowRender === 'function') {
-      return rowRender(item, rowIndex)
-    }
     return sortDataItem().map(([value, render]) => {
       return (
         <div
@@ -149,9 +145,14 @@ export const Table: FunctionComponent<
 
   const renderBodyTrs = () => {
     return innerValue.map((item, index) => {
+      const inner = renderBodyTds(item, index)
+      const { rowRender } = item
+      if (rowRender && typeof rowRender === 'function') {
+        return rowRender(item, index, { inner })
+      }
       return (
         <div className={bodyClassPrefix} key={index}>
-          {renderBodyTds(item, index)}
+          {inner}
         </div>
       )
     })