v-data-table에 클릭 이벤트를 추가하는 방법

v-data-table에 클릭 이벤트를 추가하는 방법

테이블 행을 클릭하면 editItem 함수를 호출하고 싶다.현재 내가 테이블 행을 클릭해도 세부사항 페이지가 표시되지 않는 경우.그러나 이 클릭 이벤트를 특정 테이블 데이터에 넣으면 editItem 함수가 호출된다.어떻게 하면 테이블 행 자체에서 이 같은 기능을 호출할 수 있을까?

여기 내 코드에서 v-data-table 템플릿과 슬롯을 사용해 보고 클릭 이벤트를 행에 포함했지만 둘 다 작동하지 않는다.

<template slot="items" slot-scope="props">
   <tr @click="editItem(item), selected = item.id">
      <td>{{ props.item.member }}</td>
      <td>{{ props.item[1] }}</td>
      <td>{{ props.item[2] }}</td>
      <td>{{ props.item[3] }}</td>
      <td>{{ props.item[4] }}</td>
      <td>{{ props.item[5] }}</td>
      <td>{{ props.item[6] }}</td>
      <td>{{ props.item[7] }}</td>
      <td>{{ props.item[8] }}</td>
      <td>{{ props.item[9] }}</td>
      <td>{{ props.item[10] }}</td>
      <td>{{ props.item[11] }}</td>
      <td>{{ props.item[12] }}</td>
      <td>{{ props.item[13] }}</td>
    </tr>
</template>

행을 클릭하면 editItem 함수가 호출될 것으로 예상됨

나는 다음 방법으로 그 문제를 해결할 방법을 찾았다.@click:row

<v-data-table :headers="headers" :items="desserts" :items-per-page="5"
    class="elevation-1" @click:row="handleClick">
</v-data-table>

그handleClick함수는 클릭된 항목의 값을 반환하므로, 나는 내 값에 대해 작업할 메서드를 호출한다.handleClick방법나는 또한 Vuetify 방식을 찾지 못했기 때문에 클릭된 행을 수동으로 강조 표시했다.

handleClick 방법의 예는 다음과 같다.

handleClick(value) {
    this.highlightClickedRow(value);
    this.viewDetails(value);
},

event.target을 사용하여 클릭된 행에 액세스할 수도 있다.예:

highlightClickedRow(value) {
    const tr = value.target.parentNode;
    tr.classList.add('highlight');
},

하이라이트로 다른 해결책을 찾았어.왜냐하면 안제이루씨의 생각은 나에게 맞지 않았기 때문이다.

뷔에티파이 2.0.0에서

템플릿

<v-data-table 
  :headers="headers"
  :items="desserts"
  :class="[item.selected && 'selected']"
  @click:row="handleClick"
/>
...
</v-data-table>

및 스크립트 방식

handleClick(row) {
    // set active row and deselect others
    this.desserts.map((item, index) => {
        item.selected = item === row

        this.$set(this.desserts, index, item)
    })

    // or just do something with your current clicked row item data
    console.log(row.sugar)
},

그리고 스타일

.selected {
    background-color: red
}

이 솔루션은 투시법 2.x를 사용하는 데 가장 적합하며 도움이 될 수 있다.

{
  // inside Vue Component
  methods: {
    openLink(link) {
      console.log(`opened link ${link}`)
    }
  }
}

<v-data-table
  :options="{ openLink }"
>
  <template v-slot:body="{ items, options }">
    <tbody>
      <tr
        v-for="item in items"
        :key="item.id"
      >
        <td>
          <button @click="() => options.openLink(item)" />
        </td>
      </tr>
    </tbody>
  </template>
</v-data-table>

보기: Data Table Api - 슬롯.이 문제를 해결하기 위해 접근하기 가장 좋은 것은 나를 위한 것이다.

참조URL: https://stackoverflow.com/questions/58025420/how-can-i-add-a-click-event-to-the-v-data-table