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

src/components/app-vuero/ComVFlexTable.vue

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

src/pages/app/ApprovalManagement.vue

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

src/pages/app/priceManagement.vue

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