CSS 컨트롤 하는 3가지 방법(feat. Bootstrap vue)

회사에서 vue를 사용하는데 vue2를 사용해 한다..
요즘 거의 vue3를 쓰는거 같은데... 사실 react를 쓰고싶은데...
(vue3나 react로 갈아타기에는 이미 방대해진 코드...)
며칠만 할애하면 금방 넘어갈 수 있을 것 같은데...
여러가지 사정상 나 혼자 진행해야 할 듯 하고
많은 리스크를 감수하기에는... 얻는게...

여튼 우선순위가 높은 일이 많아 진행하지 못 하고 있다.ㅠㅠ

각설하고...

Bootstrap vue를 이용하여 css를 컨트롤 해보자.
b-table의 넓이를 지정을 예시로 css를 3가지 방법으로 다뤄볼거다.

1. css를 작성한 후 script 파트에 class를 연결시켜주는 방법

필요한 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>

2. css파트를 작성하지 않고 data에 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>

3. html부분(inline)과 함수를 이용해서 CSS를 조작하는 방법

<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를 여러가지 방법으로 컨트롤하는 방법이다.
원리는 같지만 알면 이래저래 필요한 방법으로 잘 쓸 수 있을 것 같다.