Vuetify에서 v-data-table에 \n(줄바꿈)이 동작하지 않는 현상

0. 목차

1. 이슈
2. 해결

 

1. 이슈

Vue.js(2.6.11v)와 Vuetify(2.4.0)을 사용하는 프로젝트에서 아래와 같은 형식으로 Data Table을 보여주는 로직이 있다.
아래 코드가 실제로 현업에서 사용되는 코드는 아니며, 글을 작성하기 위해 쉬운 예시로 코드를 작성했다.

        <v-data-table
          :headers="headers"
          :items="items"
          :items-per-page="itemsPerPage"
          hide-default-footer
          class="elevation-1"></v-data-table>
=============================================================  
data() {  
return {  
  page: 1,  
  pageCount: 0,  
  itemsPerPage: 10,  
  headers: [  
    { text: 'Calories\n(per 100g)', align: 'center', sortable: false, value: 'calories' },  
    { text: 'Protein\n(per 100g)', align: 'center', sortable: false, value: 'protein' },  
    { text: 'Carbohydrates\n(per 100g)', align: 'center', sortable: false, value: 'carbohydrates' },  
    ],  
  items: [],  
  };  
},

문제는 header에 들어갈 text에 \n이 있는데, 실제로 렌더링이 된 페이지에서는 한 줄 띄우기가 아닌 ' '(스페이스바)로 작동된다는 점이었다.


대안책으로 <br>을 적용해봤으나, 이 경우에는 문자 그대로 <br> 텍스트를 보여주고 있었다.
<br> 텍스트를 그대로 보여주는걸 보니, 아마 별도로 header 데이터를 따로 빼내어서 일일이 v-html을 선언해줘야 html tag가 정상적으로 동작하는걸로 의심이 됐다.


문제는 실제 현업에서 사용하는 헤더의 개수가 상당해서, 따로 헤더 파일을 위한 컴포넌트를 작성했다는 점이다. 일일이 헤더값들을 따로 빼내기는 귀찮아서, 무언가 다른 방법이 없을까 고민했다.

2. 해결책

        <v-data-table
          :headers="headers"
          :items="items"
          :items-per-page="itemsPerPage"
          hide-default-footer
          class="elevation-1"></v-data-table>

위의 <v-data-table> 항목이 들어간 코드에 아래 css 코드를 추가했다.

.v-data-table >>> .v-data-table-header th {
  white-space: pre !important;
}

위와 같이 white-space: pre를 선언하여 \n이 원래 의도되로 동작하도록 로직을 작성했다. 결과적으로 의도대로 줄바꿈이 정상 동작했다.