vuetify Data tables slot 구성 (dynamic slot name 활용)

현재 vuetify를 사용하는 프로젝트 진행중!
Data tables 컴포넌트를 갖고 있는 특정 컴포넌트가 필요해서 구상한
내용 및 slot 적용에 대해 작성한다.

자식 컴포넌트 (MyDataTable) 생성

<template>
  <v-btn>
    hello
  </v-btn>
  <v-data-table
    :items="items"
    :headers="headers"
  />
  ...
</template>
<script>
  export default {
    name: 'MyDataTable',
    props: {
      items: Array,
      headers: Array,
    },
  }
</script>

데이터 테이블과 버튼을 1개씩 가지고 있는 MyDataTable 컴포넌트를 생성한다.

부모 컴포넌트 (Parent) 생성

<template>
  <my-data-table
    :items=testItems
    :headers=testHeaders
  />
  ...
</template>
import MyDataTable from './MyDataTable.vue'
<script>
  export default {
    name: 'Parent',
    components: {
      MyDataTable,
    },
    data: {
      testItems: [
          { name: '로로', age: 27, gender: 'M' },
          { name: '룰루', age: 29, gender: 'F' },
          { name: '랄라', age: 35, gender: 'F' },
      ],
      testHeaders: [
          { text: '이름', value: 'name' },
          { text: '나이', value: 'age' },
          { text: '성별', value: 'gender' },,
      ],
    },
  }
</script>

MyDataTable 컴포넌트를 자식으로 사용하는 Parent 부모 컴포넌트를 생성한다.
MyDataTable의 데이터 테이블이 정상적으로 출력될 것이다.

---

내가 하고 싶은 작업은 이렇게 아주 심플하고 간단하게 테이블 내용을 보여주는 것이
아니었다...!?#$@

데이터가 아래와 같이 나온다고 가정을 해보자

이름	나이	성별
로로	25	M
룰루	29	F
랄랄	31	F

위의 데이터에서 성별 컬럼 데이터에 텍스트가 아닌 특정 버튼을 보여주고 싶은 경우가 발생했다!

dynamic slot name을 이용하여 위의 경우를 해결

dynamic slot name 적용

<template>
  <v-btn>
    hello
  </v-btn>
  <v-data-table
    :items="items"
    :headers="headers"
  >
    <template v-for="info in customSlotInfo" v-slot[info.slotName]="{ item }">
      <slot :name="`${info.name}_custom`" v-bind:item="item" />
    </template>
  </v-data-table>
  ...
</template>
<script>
  export default {
    name: 'MyDataTable',
    props: {
      items: Obejct,
      customSlotInfo: Array, 	
    },
  }
</script>

MyDataTable 컴포넌트에 slot을 추가하자!
단, 이 때 부모 컴포넌트에서 custom할 정보를 customSlotInfo 배열 데이터로 받아온다.

Parent는 아래와 같이 변경된다.

변경된 Parent 컴포넌트

<template>
  <my-data-table
    :items=testItems
    :headers="testHeaders"
    :customSlotInfo=customSlotInfo
  >
    <template v-slot:gender_custom="{ item }">
        <v-icon
          v-if="item.gender === 'F'"
        >
          mdi-gender-female
        </v-icon>
      	<v-icon
          v-else
        >
          mdi-gender-male
        </v-icon>
    </template>
  </my-data-table>
  ...
</template>
import MyDataTable from './MyDataTable.vue'
<script>
  export default {
    name: 'Parent',
    components: {
      MyDataTable,
    },
    data: {
      testItems: [
          { name: '로로', age: 27, gender: 'M' },
          { name: '룰루', age: 29, gender: 'F' },
          { name: '랄라', age: 35, gender: 'F' },
      ],
      testHeaders: [
          { text: '이름', value: 'name' },
          { text: '나이', value: 'age' },
          { text: '성별', value: 'gender' },,
      ],
      customSlotInfo: [
        { name: 'gender', slotName: 'item.gender' }
      ]
    },
  }
</script>

gender_custom slot을 통해서 텍스트 값이 아닌 icon으로 변경 완료!