Skip to content

Commit 39a9eba

Browse files
author
githubnull
committed
fix: Header规则管理和会话Header管理表格checkbox水平居中
1 parent 718ddfb commit 39a9eba

2 files changed

Lines changed: 62 additions & 2 deletions

File tree

src/frontEnd/src/views/Config/components/HeaderRulesConfig.vue

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,7 @@
174174
:resizableColumns="true"
175175
columnResizeMode="fit"
176176
>
177-
<Column selectionMode="multiple" style="width: 50px"></Column>
177+
<Column selectionMode="multiple" headerStyle="width: 50px; text-align: center;" bodyStyle="text-align: center;"></Column>
178178
<Column field="id" header="ID" sortable style="width: 80px"></Column>
179179
<Column field="name" header="规则名称" sortable></Column>
180180
<Column field="header_name" header="Header名称" sortable></Column>
@@ -1529,6 +1529,20 @@ async function batchDeleteRules() {
15291529
font-family: monospace;
15301530
font-size: 0.9em;
15311531
}
1532+
1533+
// 选择列checkbox居中
1534+
:deep(.p-datatable-thead > tr > th:first-child),
1535+
:deep(.p-datatable-tbody > tr > td:first-child) {
1536+
text-align: center !important;
1537+
vertical-align: middle !important;
1538+
1539+
.p-checkbox {
1540+
margin: 0 auto;
1541+
display: flex !important;
1542+
align-items: center;
1543+
justify-content: center;
1544+
}
1545+
}
15321546
}
15331547
}
15341548
@@ -1783,6 +1797,11 @@ async function batchDeleteRules() {
17831797
17841798
// 复选框样式 - 使用更高优先级
17851799
:deep(.p-checkbox) {
1800+
margin: 0 auto;
1801+
display: flex !important;
1802+
align-items: center;
1803+
justify-content: center;
1804+
17861805
.p-checkbox-box {
17871806
width: 18px !important;
17881807
height: 18px !important;
@@ -1814,6 +1833,17 @@ async function batchDeleteRules() {
18141833
}
18151834
}
18161835
1836+
// 选择列单元格居中
1837+
:deep(.p-datatable-thead > tr > th:first-child),
1838+
:deep(.p-datatable-tbody > tr > td:first-child) {
1839+
text-align: center !important;
1840+
vertical-align: middle !important;
1841+
1842+
.p-checkbox {
1843+
margin: 0 auto;
1844+
}
1845+
}
1846+
18171847
// 全局强制样式
18181848
:deep(.p-datatable .p-checkbox-box.p-highlight) {
18191849
background: var(--primary-color) !important;

src/frontEnd/src/views/Config/components/SessionHeadersConfig.vue

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,7 @@
173173
:resizableColumns="true"
174174
columnResizeMode="fit"
175175
>
176-
<Column selectionMode="multiple" style="width: 50px"></Column>
176+
<Column selectionMode="multiple" headerStyle="width: 50px; text-align: center;" bodyStyle="text-align: center;"></Column>
177177
<Column field="id" header="ID" sortable style="width: 80px"></Column>
178178
<Column field="header_name" header="Header名称" sortable></Column>
179179
<Column field="header_value" header="Header值">
@@ -1984,6 +1984,20 @@ async function batchToggleActiveHeaders(isActive: boolean) {
19841984
font-size: 0.9em;
19851985
color: var(--text-color-secondary);
19861986
}
1987+
1988+
// 选择列checkbox居中
1989+
:deep(.p-datatable-thead > tr > th:first-child),
1990+
:deep(.p-datatable-tbody > tr > td:first-child) {
1991+
text-align: center !important;
1992+
vertical-align: middle !important;
1993+
1994+
.p-checkbox {
1995+
margin: 0 auto;
1996+
display: flex !important;
1997+
align-items: center;
1998+
justify-content: center;
1999+
}
2000+
}
19872001
}
19882002
19892003
code {
@@ -2059,6 +2073,11 @@ async function batchToggleActiveHeaders(isActive: boolean) {
20592073
20602074
// 复选框样式 - 使用更高优先级
20612075
:deep(.p-checkbox) {
2076+
margin: 0 auto;
2077+
display: flex !important;
2078+
align-items: center;
2079+
justify-content: center;
2080+
20622081
.p-checkbox-box {
20632082
width: 18px !important;
20642083
height: 18px !important;
@@ -2090,6 +2109,17 @@ async function batchToggleActiveHeaders(isActive: boolean) {
20902109
}
20912110
}
20922111
2112+
// 选择列单元格居中
2113+
:deep(.p-datatable-thead > tr > th:first-child),
2114+
:deep(.p-datatable-tbody > tr > td:first-child) {
2115+
text-align: center !important;
2116+
vertical-align: middle !important;
2117+
2118+
.p-checkbox {
2119+
margin: 0 auto;
2120+
}
2121+
}
2122+
20932123
// 全局强制样式
20942124
:deep(.p-datatable .p-checkbox-box.p-highlight) {
20952125
background: var(--primary-color) !important;

0 commit comments

Comments
 (0)