회사에서 vue를 사용하는데 vue2를 사용해 한다..
요즘 거의 vue3를 쓰는거 같은데... 사실 react를 쓰고싶은데...
(vue3나 react로 갈아타기에는 이미 방대해진 코드...)
며칠만 할애하면 금방 넘어갈 수 있을 것 같은데...
여러가지 사정상 나 혼자 진행해야 할 듯 하고
많은 리스크를 감수하기에는... 얻는게...
여튼 우선순위가 높은 일이 많아 진행하지 못 하고 있다.ㅠㅠ
각설하고...
Bootstrap vue를 이용하여 css를 컨트롤 해보자.
b-table의 넓이를 지정을 예시로 css를 3가지 방법으로 다뤄볼거다.
필요한 css를 작성해 준 후 fields에 `thClass`를 이용해 script 파트에서 연결시켜주었다.
<template>
<div>
<b-table
striped
bordered
hover
fixed
:items="items"
:fields="fields"
/>
</div>
</template>
<script>
//...생략...
data () {
fields: [
{ key: 'key1', label: 'label1', thClass: 'width10', sortable: false, sortDirection: 'desc' },
{ key: 'key2', label: 'label2', thClass: 'width10', sortable: false, sortDirection: 'desc' },
{ key: 'key3', label: 'label3', thClass: 'width15', sortable: false },
{ key: 'key4', label: 'label4', thClass: 'width50', sortable: false },
{ key: 'key5', label: 'label5', thClass: 'width15', sortable: false }
]
}
</script>
<style>
.width10 {
width: 10%
},
.width15 {
width: 15%
}
.width50 {
width: 50%
}
</style>
script파트에서 `thStyle`로 직접 컬럼에 CSS를 바인딩하는 방법이다.
사실 위의 첫번째 방법이 더 범용적이고 좋다고 생각하지만
직관적인 것을 보면 아래의 방법도 나쁘지 않다고 생각한다.
<template>
<div>
<b-table
striped
bordered
hover
fixed
:items="items"
:fields="fields"
/>
</div>
</template>
<script>
...
data () {
fields: [
{ key: 'key1', label: 'label1', thStyle: { width: '10%' }, sortable: false, sortDirection: 'desc' },
{ key: 'key2', label: 'label2', thStyle: { width: '10%' }, sortable: false, sortDirection: 'desc' },
{ key: 'key3', label: 'label3', thStyle: { width: '15%' }, sortable: false },
{ key: 'key4', label: 'label4', thStyle: { width: '50%' }, sortable: false },
{ key: 'key5', label: 'label5', thStyle: { width: '15%' }, sortable: false }
]
}
</script>
<style scoped>
</style>
<template>
<div>
<b-table
striped
bordered
hover
fixed
:items="items"
:fields="fields"
>
<template #table-colgroup="scope">
<col
v-for="field in scope.fields"
:key="field.key"
:style="{ width: getColumnWidth(field.key) }"
/>
</template>
</b-table>
</div>
</template>
<script>
...
data () {
fields: [
{ key: 'key1', label: 'label1', sortable: false, sortDirection: 'desc' },
{ key: 'key2', label: 'label2', sortable: false, sortDirection: 'desc' },
{ key: 'key3', label: 'label3', sortable: false },
{ key: 'key4', label: 'label4', sortable: false },
{ key: 'key5', label: 'label5', sortable: false }
]
},
methods () {
getColumnWidth (key) { // 이부분 case로 하면 더 깔끔할 듯?..
if (key === 'key1' || key === 'key2') {
return '10%'
} else if (key === 'key3' || key === 'key5') {
return '15%'
} else if (key === 'key4') {
return '50%'
return ''
}
}
</script>
<style scoped>
</style>
사실 별거 아니고 CSS를 여러가지 방법으로 컨트롤하는 방법이다.
원리는 같지만 알면 이래저래 필요한 방법으로 잘 쓸 수 있을 것 같다.