Skip to content

Commit d4193d0

Browse files
authored
Merge pull request #525 from hy916/dev
fix(Table):优化Table组件
2 parents 09a0ac2 + 60c9d1a commit d4193d0

File tree

3 files changed

+40
-21
lines changed

3 files changed

+40
-21
lines changed

packages/core/src/Table/BodyRow.tsx

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -36,13 +36,13 @@ export default function BodyRow({ columns, record, style }: BodyRowProps) {
3636
let textEllipsize: textEllipsizeState | any =
3737
itm.ellipsis && itm.ellipsis
3838
? {
39-
numberOfLines: 1,
40-
ellipsizeMode: 'tail',
41-
}
39+
numberOfLines: 1,
40+
ellipsizeMode: 'tail',
41+
}
4242
: null;
4343

4444
return (
45-
<View key={itm.dataIndex} style={[idx === 0 && styles.firstLeftCell, styles.cell, itm.style]}>
45+
<View key={itm.dataIndex} style={[(columns.length - 1 === idx) ? styles.firstLeftCell : styles.cell, itm.style ? itm.style : styles.titleFlex]}>
4646
{itm.render ? (
4747
itm.render(record)
4848
) : (
@@ -63,23 +63,28 @@ const styles = StyleSheet.create({
6363
justifyContent: 'center',
6464
alignContent: 'center',
6565
borderBottomWidth: 1,
66+
borderRightWidth: 1,
67+
borderLeftWidth: 1,
6668
borderColor: colors.colorsPalette.dark70,
6769
},
6870
cell: {
69-
flex: 1,
70-
flexDirection: 'row',
71-
justifyContent: 'center',
7271
borderRightWidth: 1,
7372
borderColor: colors.colorsPalette.dark70,
74-
paddingTop: 4,
75-
paddingBottom: 4,
76-
backgroundColor: '#fff',
73+
flexDirection: 'row',
74+
justifyContent: 'center',
75+
alignItems: 'center',
7776
},
7877
firstLeftCell: {
79-
borderLeftWidth: 1,
80-
borderColor: colors.colorsPalette.dark70,
78+
flexDirection: 'row',
79+
justifyContent: 'center',
80+
alignItems: 'center',
81+
borderRightWidth: 1,
82+
borderColor: '#FFF',
8183
},
8284
content: {
8385
color: '#888888',
8486
},
87+
titleFlex: {
88+
flex: 1,
89+
}
8590
});

packages/core/src/Table/README.md

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,10 @@ const Demo = () => {
3939
style: { width: 100 },
4040
render: () => {
4141
return (
42-
<Button size="small">详情</Button>
42+
<>
43+
<Button size="small" bordered={false} textStyle={{color:'#3b8ee9'}}>编辑</Button>
44+
<Button size="small" bordered={false} textStyle={{color:'#3b8ee9'}}>详情</Button>
45+
</>
4346
);
4447
},
4548
},
@@ -96,8 +99,11 @@ const Demo = () => {
9699
style: { width: 110 },
97100
render: () => {
98101
return (
99-
<Button size="small">详情</Button>
100-
);
102+
<>
103+
<Button size="small" bordered={false} textStyle={{color:'#3b8ee9'}}>编辑</Button>
104+
<Button size="small" bordered={false} textStyle={{color:'#3b8ee9'}}>详情</Button>
105+
</>
106+
);
101107
},
102108
},
103109
]}
@@ -131,30 +137,37 @@ const Demo = () => {
131137
title: '名称',
132138
dataIndex: 'partName',
133139
ellipsis: true,
140+
style: { width: 100 },
134141
},
135142
{
136143
title: '品牌',
137144
dataIndex: 'partBrand',
138145
ellipsis: true,
146+
style: { width: 100 },
139147
},
140148
{
141149
title: '型号',
142150
dataIndex: 'partModel',
143151
ellipsis: true,
152+
style: { width: 100 },
144153
},
145154
{
146155
title: '备注',
147156
dataIndex: 'remark',
148157
ellipsis: true,
158+
style: { width: 100 },
149159
},
150160
{
151161
title: '操作',
152162
dataIndex: 'id',
153-
style: { width: 50 },
163+
style: { width: 100 },
154164
render: () => {
155165
return (
156-
<Button size="small">详情</Button>
157-
);
166+
<>
167+
<Button size="small" bordered={false} textStyle={{color:'#3b8ee9'}}>编辑</Button>
168+
<Button size="small" bordered={false} textStyle={{color:'red'}}>详情</Button>
169+
</>
170+
);
158171
},
159172
},
160173
]}

packages/core/src/Table/index.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const Table = ({ data, columns, rowKey, horizontal = true, style }: TableProps)
3232
{columns.map((itm, idx) => (
3333
<View
3434
key={itm.dataIndex + idx}
35-
style={[styles.contRight, { borderRightWidth: idx === columns.length - 1 ? 0 : 1 }, itm.style]}
35+
style={[styles.contRight, { borderRightWidth: idx === columns.length - 1 ? 0 : 1 }, itm.style ? itm.style : styles.titleFlex]}
3636
>
3737
<Text style={styles.content}>{itm.title}</Text>
3838
</View>
@@ -46,7 +46,6 @@ const Table = ({ data, columns, rowKey, horizontal = true, style }: TableProps)
4646
key={key}
4747
columns={columns}
4848
record={item}
49-
style={{ borderBottomWidth: idx === data.length - 1 ? 1 : 1 }}
5049
/>
5150
);
5251
})}
@@ -72,7 +71,6 @@ const styles = StyleSheet.create({
7271
},
7372
contRight: {
7473
borderRightWidth: 1,
75-
flex: 1,
7674
borderRightColor: colors.colorsPalette.dark70,
7775
borderBottomColor: colors.colorsPalette.dark70,
7876
color: '#888888',
@@ -91,6 +89,9 @@ const styles = StyleSheet.create({
9189
paddingTop: 4,
9290
paddingBottom: 4,
9391
},
92+
titleFlex: {
93+
flex: 1
94+
}
9495
});
9596

9697
export default Table;

0 commit comments

Comments
 (0)