Vue2_Frontend 수정1...

src/components/todo/ListComponent.vue

@@ -90,7 +90,13 @@
           <template #thead-top>
             <b-tr>
               <b-th colspan="4"> </b-th>
-              <b-th>Type 2</b-th>
+              <b-th
+                ><b-form-select
+                  v-model="filterIsDone"
+                  :options="filterIsDoneFieldOptions"
+                  @change="isDoneClick"
+                ></b-form-select
+              ></b-th>
               <b-th></b-th>
             </b-tr>
           </template>
@@ -111,12 +117,12 @@
           </template>
           <!-- 제목부분 출력용 -->
           <template #cell(title)="row">
-            {{ row.item.title }}[{{ row.item.id }}]
+            {{ row.item.title }}
           </template>
           <!-- 상세 내용 출력용 -->
           <template #cell(content)="row">
             <b-button size="sm" @click="row.toggleDetails" class="mr-2">
-              {{ row.detailsShowing ? '숨기기' : '보기' }}
+              [{{ row.item.id }}] {{ row.detailsShowing ? '숨기기' : '보기' }}
             </b-button>
           </template>
           <template #row-details="row">
@@ -192,7 +198,10 @@ export default {
           label: '사용여부',
           thStyle: { width: '105px' },
           formatter: (value) => {
-            return value ? 'Yes' : 'No'
+            const data = this.filterIsDoneFieldOptions.find(
+              (data) => data.value === value
+            )
+            return data ? data.text : value
           },
           sortable: true,
           sortByFormatted: true //fomatter결과에따른 Sort가 필요시 true
@@ -251,6 +260,12 @@ export default {
         { text: '수정일', value: 'updatedAt' },
         { text: '등록일', value: 'createdAt' }
       ],
+      filterIsDone: '',
+      filterIsDoneFieldOptions: [
+        { text: '선택', value: '' },
+        { text: 'YES', value: true },
+        { text: 'NO', value: false }
+      ],
       selectedRows: [],
       selectedRowAllToggle: false,
       selectedRowMode: 'multi',
@@ -309,11 +324,15 @@ export default {
       this.sortDesc = event.sortDesc
       this.getDatas()
     },
-    dateClick(event) {
+    dateClick() {
-      console.log(event)
       this.filterField = this.filterDateField
       this.getDatas()
     },
+    isDoneClick() {
+      this.filter = this.filterIsDone
+      this.filterField = 'is_done'
+      this.getDatas()
+    },
     busyToggle() {
       this.isBusy = !this.isBusy
     },