com : flextable 스타일 속성 변경 및 적용

This commit is contained in:
Yesol Choi
2025-06-01 08:47:18 +09:00
parent fc67b3f3c2
commit 409c229504
3 changed files with 20 additions and 39 deletions

View File

@@ -594,31 +594,21 @@ const columns = computed(() => {
} }
.approvalColumn1 { .approvalColumn1 {
flex: 0 0 20%!important; flex: 0 0 10%!important;
} }
.approvalColumn2 { .approvalColumn2 {
flex: 0 0 40%!important;
}
.approvalColumn3 {
flex: 0 0 10%!important;
}
.approvalColumn4 {
flex: 0 0 20%!important; flex: 0 0 20%!important;
} }
.approvalColumn3 {
flex: 0 0 30%!important;
}
.approvalColumn4 {
flex: 0 0 40%!important;
}
.approvalColumn5 { .approvalColumn5 {
flex: 0 0 10%!important; flex: 0 0 50%!important;
} }
.approvalColumn6 {
.flex-table-cell.is-relative.approvalColumn5 { flex: 0 0 60%!important;
justify-content: center;
}
.flex-table-cell.is-relative.approvalColumn1 {
justify-content: center;
}
.flex-table-cell.is-relative.approvalColumn3 {
justify-content: center;
}
.flex-table-cell.is-relative.approvalColumn4 {
justify-content: center;
} }
</style> </style>

View File

@@ -67,14 +67,14 @@ const params = reactive({
regSdt:'', regSdt:'',
regEdt:'', regEdt:'',
flexColumn: [ flexColumn: [
{ key: 'process', label: '구분', cellClass: 'approvalColumn5' }, { key: 'process', label: '구분', cellClass: 'approvalColumn1', align: 'center' },
{ key: 'apprNo', label: '결재번호', cellClass: 'approvalColumn1' }, { key: 'apprNo', label: '결재번호', cellClass: 'approvalColumn1', align: 'center' },
{ key: 'title', label: '제목', cellClass: 'approvalColumn2' }, { key: 'title', label: '제목', cellClass: 'approvalColumn6', align: 'start' },
{ key: 'name', label: '작성자', cellClass: 'approvalColumn3' }, { key: 'name', label: '작성자', cellClass: 'approvalColumn1', align: 'center' },
{ {
key: 'regDt', key: 'regDt',
label: '등록일', label: '등록일',
cellClass: 'approvalColumn4', cellClass: 'approvalColumn1',
format: formatRegDt, format: formatRegDt,
}, },
], ],
@@ -280,15 +280,6 @@ const onRowClick = async (row) => {
:use-approval-header="true" :use-approval-header="true"
@row-click="onRowClick" @row-click="onRowClick"
> >
<template #approval-header>
<div class="flex-table-header">
<span class="flex-table-item approvalColumn5">구분</span>
<span class="flex-table-item approvalColumn1">결재번호</span>
<span class="flex-table-item approvalColumn2">제목</span>
<span class="flex-table-item approvalColumn3">작성자</span>
<span class="flex-table-item approvalColumn4">등록일</span>
</div>
</template>
</ComVFlexTable> </ComVFlexTable>
<!-- 모달 컴포넌트 추가 --> <!-- 모달 컴포넌트 추가 -->

View File

@@ -29,11 +29,11 @@ const params = reactive({
sessionUser:'', sessionUser:'',
priceData: [], priceData: [],
felxColumn: [ felxColumn: [
{ key: 'cateNm', label: '분야', align: 'center', cellClass: 'approvalColumn5'}, { key: 'cateNm', label: '분야', align: 'center', cellClass: 'approvalColumn1'},
{ key: 'title', label: '제목',align: 'start'}, { key: 'title', label: '제목',align: 'start', cellClass: 'approvalColumn6'},
{ key: 'regNm', label: '담당자', align: 'center', cellClass: 'approvalColumn5'}, { key: 'regNm', label: '담당자', align: 'center', cellClass: 'approvalColumn1'},
{ key: 'regDt', label: '등록일' ,align: 'start', cellClass: 'approvalColumn5'}, { key: 'regDt', label: '등록일' ,align: 'center', cellClass: 'approvalColumn1'},
{ key: 'stNm', label: '등록 상태', cellClass: 'approvalColumn5' }, { key: 'stNm', label: '등록 상태',align: 'center', cellClass: 'approvalColumn1' },
] ]
}) })