[Vuetify] v-data-table eslint에 맞춰서 사용하기

<v-data-table
  :headers="[
  { text: '헤더1', value: '멤버이름1' },
  { text: '헤더2', value: '멤버이름2' },
  { text: '헤더3', value: '멤버이름3' },
  ]"
  :items="[{멤버이름1: 값1, 멤버이름2: 값2, 멤버이름3: 값3}, ...]">
  
  <template #[`item.헤더1`]="{ item }">
  	<div>{{ item }}%</div> // 이렇게 하면 헤더1,2,3 전부 object형식으로 나온다
  </template>
  
  <template #[`item.헤더2`]="{ value }">
    <div>{{ value }}%</div> // 이렇게 하면 헤더2의 값만 나온다
  </template>
  
</v-data-table>

headers: 컬럼명과, 그에 대응되는 object member name을 넣어준다

items: headers와 맞춰서 각 row에 들어갈 데이터를 object로, 그리고 각 obejct를 list로 묶어준다

 

그리고 템플릿을 작성할 때 주의 해야하는 것은

 

vuetify document에는 다음과 같이 적혀져있다

v-slot:item.헤더1="{ item }"
// v-slot:item.calories="{ item }

하지만 위와 같이 작성하면 다음의 eslint에서 다음과 같은 에러를 보인다.

error  'v-slot' directive doesn't support any modifier

이를 해결하기 위해서는 다음과 같이 작성해주면 된다.

#[`item.헤더1`]="{ item }"