Vuetify2.x에서 변경된 V-Data-Table을 사용자 정의할 때의 메모

개요

Vuetify 1.5에서 2.2로 올리면 V-Data-Table의 작성 방법이 바뀌었다.
1.5→2.0에 준 예 을 참고로 했다.
V-Data-Table에 관해서는, 링크처에 있도록(듯이) 컬럼 지향이 된 것 같은 이미지로 template의 작성법이 바뀌었던 것 같았다.
처음에는 V-Data-Iterator로 돌려서 자력으로 Table을 구축할 필요가 있을까, 라고 생각했지만 공식 문서 에 예가 있었으므로, 참조하면서 해결했을 때의 메모.

행 클릭

문서의 API란에 자연스럽게 click:row 라고 있었으므로 시험했다.



단순히 이벤트에 함수를 할당하는 것이 좋았습니다.

발췌:

vue

<template lang="pug">
  v-data-table(
   :headers="headers"
   :items="db"
   hide-default-footer
   @click:row="clickRow"
  )
</template>
<script>
  export default {
    name: "List",
    data: () => ({
      headers: [
       {text:'ID', value:'id'},
       {text:'なかまたち', value:'name'}
      ],
      db: [
        {id:1, name:'ブタさん'},
        {id:2, name:'ウサギさん'},
        {id:3, name:'キツネさん'},
        {id:4, name:'ゾウさん'}
      ]
    }),
    methods: {
      clickRow(row) {
        console.log(row.name) // 1 => ブタさん...
      }
    }
</script>

1행마다 조작 아이콘 등 데이터 이외의 열을 표시

공식 문서의 예 대로

헤더 열 정의에 작업에 대한 열 추가

template에서 조작 열 정의

헤더 열에 추가

vue 스크립트 발췌

    data: () => ({
      headers: [
       {text:'ID', value:'id'},
       {text:'なかまたち', value:'name'},
       {text:'操作', value:'action'}
      ],
～～～

표시용 template

vue template

<template lang="pug">
  v-data-table(
   :headers="headers"
   :items="db"
   hide-default-footer
   @click:row="clickRow"
  )
    // 各行・列の描画はよろしくやってくれるので操作列だけ記述すればよい
    template(v-slot:item.action="{item}")
       v-btn(@click="showName(item.name)")
         v-icon fa-home
</template>
<script>
(略)
    showName(str) {
      console.log(str)
    }
(略)
</script>

요약

어떻게 하면 좋은지 알아내는데 시간이 걸렸지만, 결국 공식 문서를 보고 시험해 어떻게든 되었다.
간결하게 걸리기 때문에 1.5보다 편하지 않을까.
특정 열만 표시 방법을 바꾼다는 것도 예와 같이 어떻게 될까.

상기 예, 각각이라면 문제 없지만, 행 클릭과 조작 버튼을 모두 설정하고 있었던 경우, 둘 다 동시에 실행되는 부분은 미해결(구누누)