Merge pull request #525 from hy916/dev

fix(Table):优化Table组件

Author: ChenlingasMx

packages/core/src/Table/BodyRow.tsx

@@ -36,13 +36,13 @@ export default function BodyRow({ columns, record, style }: BodyRowProps) {
         let textEllipsize: textEllipsizeState | any =
           itm.ellipsis && itm.ellipsis
             ? {
-                numberOfLines: 1,
-                ellipsizeMode: 'tail',
-              }
+              numberOfLines: 1,
+              ellipsizeMode: 'tail',
+            }
             : null;
 
         return (
-          <View key={itm.dataIndex} style={[idx === 0 && styles.firstLeftCell, styles.cell, itm.style]}>
+          <View key={itm.dataIndex} style={[(columns.length - 1 === idx) ? styles.firstLeftCell : styles.cell, itm.style ? itm.style : styles.titleFlex]}>
             {itm.render ? (
               itm.render(record)
             ) : (
@@ -63,23 +63,28 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignContent: 'center',
     borderBottomWidth: 1,
+    borderRightWidth: 1,
+    borderLeftWidth: 1,
     borderColor: colors.colorsPalette.dark70,
   },
   cell: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'center',
     borderRightWidth: 1,
     borderColor: colors.colorsPalette.dark70,
-    paddingTop: 4,
-    paddingBottom: 4,
-    backgroundColor: '#fff',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   firstLeftCell: {
-    borderLeftWidth: 1,
-    borderColor: colors.colorsPalette.dark70,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRightWidth: 1,
+    borderColor: '#FFF',
   },
   content: {
     color: '#888888',
   },
+  titleFlex: {
+    flex: 1,
+  }
 });

packages/core/src/Table/README.md

@@ -39,7 +39,10 @@ const Demo = () => {
             style: { width: 100 },
             render: () => {
               return (
-                    <Button size="small">详情</Button>
+                <>
+                    <Button size="small" bordered={false} textStyle={{color:'#3b8ee9'}}>编辑</Button>
+                    <Button size="small" bordered={false} textStyle={{color:'#3b8ee9'}}>详情</Button>
+                </>
               );
             },
           },
@@ -96,8 +99,11 @@ const Demo = () => {
             style: { width: 110 },
             render: () => {
               return (
-                    <Button size="small">详情</Button>
-              );
+                <>
+                    <Button size="small" bordered={false} textStyle={{color:'#3b8ee9'}}>编辑</Button>
+                    <Button size="small" bordered={false} textStyle={{color:'#3b8ee9'}}>详情</Button>
+                </>         
+                );
             },
           },
         ]}
@@ -131,30 +137,37 @@ const Demo = () => {
             title: '名称',
             dataIndex: 'partName',
             ellipsis: true,
+            style: { width: 100 },
           },
           {
             title: '品牌',
             dataIndex: 'partBrand',
             ellipsis: true,
+            style: { width: 100 },
           },
           {
             title: '型号',
             dataIndex: 'partModel',
             ellipsis: true,
+            style: { width: 100 },
           },
           {
             title: '备注',
             dataIndex: 'remark',
             ellipsis: true,
+            style: { width: 100 },
           },
           {
             title: '操作',
             dataIndex: 'id',
-            style: { width: 50 },
+            style: { width: 100 },
             render: () => {
               return (
-                    <Button size="small">详情</Button>
-              );
+                <>
+                    <Button size="small" bordered={false} textStyle={{color:'#3b8ee9'}}>编辑</Button>
+                    <Button size="small" bordered={false} textStyle={{color:'red'}}>详情</Button>
+                </>
+               );
             },
           },
         ]}

packages/core/src/Table/index.tsx

@@ -32,7 +32,7 @@ const Table = ({ data, columns, rowKey, horizontal = true, style }: TableProps)
           {columns.map((itm, idx) => (
             <View
               key={itm.dataIndex + idx}
-              style={[styles.contRight, { borderRightWidth: idx === columns.length - 1 ? 0 : 1 }, itm.style]}
+              style={[styles.contRight, { borderRightWidth: idx === columns.length - 1 ? 0 : 1 }, itm.style ? itm.style : styles.titleFlex]}
             >
               <Text style={styles.content}>{itm.title}</Text>
             </View>
@@ -46,7 +46,6 @@ const Table = ({ data, columns, rowKey, horizontal = true, style }: TableProps)
                 key={key}
                 columns={columns}
                 record={item}
-                style={{ borderBottomWidth: idx === data.length - 1 ? 1 : 1 }}
               />
             );
           })}
@@ -72,7 +71,6 @@ const styles = StyleSheet.create({
   },
   contRight: {
     borderRightWidth: 1,
-    flex: 1,
     borderRightColor: colors.colorsPalette.dark70,
     borderBottomColor: colors.colorsPalette.dark70,
     color: '#888888',
@@ -91,6 +89,9 @@ const styles = StyleSheet.create({
     paddingTop: 4,
     paddingBottom: 4,
   },
+  titleFlex: {
+    flex: 1
+  }
 });
 
 export default Table;