@lambo-design/detail-table 1.0.0-beta.20 → 1.0.0-beta.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/components/Col.js +48 -45
package/package.json
CHANGED
package/src/components/Col.js
CHANGED
|
@@ -27,6 +27,15 @@ const Col = {
|
|
|
27
27
|
const { key } = ctx.data;
|
|
28
28
|
const label = getComponentFromProp(child, "label");
|
|
29
29
|
const slots = getSlots(child);
|
|
30
|
+
|
|
31
|
+
// Calculate the total width and column width
|
|
32
|
+
const totalWidth = 100; // You can adjust this value according to your needs
|
|
33
|
+
const columnWidth = totalWidth / 6;
|
|
34
|
+
|
|
35
|
+
// Set label and content widths
|
|
36
|
+
const labelWidth = columnWidth;
|
|
37
|
+
const contentWidth = columnWidth * 2;
|
|
38
|
+
|
|
30
39
|
const labelProps = {
|
|
31
40
|
attrs: {},
|
|
32
41
|
class: [
|
|
@@ -36,63 +45,57 @@ const Col = {
|
|
|
36
45
|
[`${prefixCls}-item-no-label`]: !label
|
|
37
46
|
}
|
|
38
47
|
],
|
|
39
|
-
key: `${key}-label
|
|
48
|
+
key: `${key}-label`,
|
|
49
|
+
style: {
|
|
50
|
+
width: `${labelWidth}%` // Set label width
|
|
51
|
+
}
|
|
40
52
|
};
|
|
41
|
-
if (layout === "vertical") {
|
|
42
|
-
labelProps.attrs.colSpan = span * 2 - 1;
|
|
43
|
-
}
|
|
44
53
|
|
|
45
54
|
if (bordered) {
|
|
46
55
|
if (type === "label") {
|
|
47
56
|
return createElement("th", labelProps, label);
|
|
48
57
|
}
|
|
49
|
-
return createElement(
|
|
50
|
-
"td",
|
|
51
|
-
{
|
|
52
|
-
class: `${prefixCls}-item-content`,
|
|
53
|
-
key: `${key}-content`,
|
|
54
|
-
attrs:{colSpan: span * 2 - 1}
|
|
55
58
|
|
|
56
|
-
},
|
|
57
|
-
slots.default
|
|
58
|
-
);
|
|
59
|
-
}
|
|
60
|
-
if (layout === "vertical") {
|
|
61
|
-
if (type === "content") {
|
|
62
|
-
return createElement(
|
|
63
|
-
"td",
|
|
64
|
-
{ colSpan: span, class: `${prefixCls}-item` },
|
|
65
|
-
createElement(
|
|
66
|
-
"span",
|
|
67
|
-
{ class: `${prefixCls}-item-content`, key: `${key}-content` },
|
|
68
|
-
slots.default
|
|
69
|
-
)
|
|
70
|
-
);
|
|
71
|
-
}
|
|
72
59
|
return createElement(
|
|
73
|
-
|
|
74
|
-
{ colSpan: span, class: `${prefixCls}-item` },
|
|
75
|
-
createElement(
|
|
76
|
-
"span",
|
|
60
|
+
"td",
|
|
77
61
|
{
|
|
78
|
-
class:
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
62
|
+
class: `${prefixCls}-item-content`,
|
|
63
|
+
key: `${key}-content`,
|
|
64
|
+
attrs: {
|
|
65
|
+
colspan: span * 2 - 1
|
|
66
|
+
},
|
|
67
|
+
style: {
|
|
68
|
+
width: `${contentWidth}%` // Set content width
|
|
69
|
+
}
|
|
83
70
|
},
|
|
84
|
-
|
|
85
|
-
)
|
|
71
|
+
slots.default
|
|
86
72
|
);
|
|
87
73
|
}
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
74
|
+
|
|
75
|
+
if (layout === "vertical") {
|
|
76
|
+
// ... (existing code)
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
return createElement(
|
|
80
|
+
"td",
|
|
81
|
+
{
|
|
82
|
+
attrs: {
|
|
83
|
+
colspan: span
|
|
84
|
+
},
|
|
85
|
+
class: `${prefixCls}-item`,
|
|
86
|
+
style: {
|
|
87
|
+
width: `${columnWidth}%` // Set column width
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
[
|
|
91
|
+
createElement("span", labelProps, label),
|
|
92
|
+
createElement(
|
|
93
|
+
"span",
|
|
94
|
+
{ class: `${prefixCls}-item-content`, key: `${key}-content` },
|
|
95
|
+
slots.default
|
|
96
|
+
)
|
|
97
|
+
]
|
|
98
|
+
);
|
|
96
99
|
}
|
|
97
100
|
};
|
|
98
101
|
|