[vue: worklist 제작] 2-1. 전체 테이블 제어할수 있도록 class명 통일화

Group.vue

<table>

    <colgroup>

        <col v-for="(iaKey) in iaKeys" :class="`col__${iaKey.replace(/\s/g, '-')} `" />

    </colgroup>

    <thead>

        <tr>

            <th v-for="(iaKey) in iaKeys" :class="`col__${iaKey.replace(/\s/g, '-')}`" >

                <span v-if="iaKey == 'worklist-status'">상태</span>

                <span v-else-if="iaKey == 'worklist-path'">path</span>

               <span v-else-if="iaKey == 'worklist-note'">비고</span>

                <span v-else>{{ iaKey }}</span>

            </th>

        </tr>

    </thead>

    <tbody>

        <tr v-for="(iaValList) in iaGroup">

            <td

                 v-for="(iaVal, title) in iaValList"

                 :class="`col__${title.replace(/\s/g, '-')}`"

             >

                <span>{{iaVal}}</span>

            </td>

        </tr>

    </tbody>

</table>

 

col__${iaKey.replace(/\s/g, '-')} 공백은 대쉬(-)로 치환하여 각 열마다 동일한 class를 부여하여 width등을 제어한다