7820380e
 “wangming”
1
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
export default {
name: 'ElDescriptionsRow',
props: {
row: {
type: Array
}
},
inject: ['elDescriptions'],
render(h) {
const { elDescriptions } = this;
const row = (this.row || []).map(item => {
return {
...item,
label: item.slots.label || item.props.label,
...['labelClassName', 'contentClassName', 'labelStyle', 'contentStyle'].reduce((res, key) => {
res[key] = item.props[key] || elDescriptions[key];
return res;
}, {})
};
});
if (elDescriptions.direction === 'vertical') {
return (
<tbody>
<tr class="el-descriptions-row">
{
row.map(item => {
return (
<th
class={{
'el-descriptions-item__cell': true,
'el-descriptions-item__label': true,
'has-colon': elDescriptions.border ? false : elDescriptions.colon,
'is-bordered-label': elDescriptions.border,
[item.labelClassName]: true
}}
style={item.labelStyle}
colSpan={item.props.span}
>{item.label}</th>
);
})
}
</tr>
<tr class="el-descriptions-row">
{
row.map(item =>{
return (
<td
class={['el-descriptions-item__cell', 'el-descriptions-item__content', item.contentClassName]}
style={item.contentStyle}
colSpan={item.props.span}
>{item.slots.default}</td>
);
})
}
</tr>
</tbody>
);
}
if (elDescriptions.border) {
return (
<tbody>
<tr class="el-descriptions-row">
{
row.map(item=> {
return ([
<th
class={{
'el-descriptions-item__cell': true,
'el-descriptions-item__label': true,
'is-bordered-label': elDescriptions.border,
[item.labelClassName]: true
}}
style={item.labelStyle}
colSpan="1"
>{item.label}</th>,
<td
class={['el-descriptions-item__cell', 'el-descriptions-item__content', item.contentClassName]}
style={item.contentStyle}
colSpan={item.props.span * 2 - 1}
>{item.slots.default}</td>
]);
})
}
</tr>
</tbody>
);
}
return (
<tbody>
<tr class="el-descriptions-row">
{
row.map(item=> {
return (
<td class="el-descriptions-item el-descriptions-item__cell" colSpan={item.props.span}>
<div class="el-descriptions-item__container">
<span
class={{
'el-descriptions-item__label': true,
'has-colon': elDescriptions.colon,
[item.labelClassName]: true
}}
style={item.labelStyle}
>{item.label}</span>
<span
class={['el-descriptions-item__content', item.contentClassName]}
style={item.contentStyle}
>{item.slots.default}</span>
</div>
</td>);
})
}
</tr>
</tbody>
);
}
};
|
