준준의 기록일지

[vue] v-data-table 더블클릭 시 행(row) 정보 가져오기 (Get row data when you click double on specific row on v-data-table) 본문

카테고리 없음

[vue] v-data-table 더블클릭 시 행(row) 정보 가져오기 (Get row data when you click double on specific row on v-data-table)

junjunwon 2021. 12. 3. 12:11

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."




@dbclick:row

더블클릭 시 선언한 showRowInfo 함수 호출

- 호출할때 파라미터, 즉 로우데이터를 가져오는 부분을 못찾았는데, 아래 출처를 통해서 정보를 얻었다.

item을 가져와서 items에 대한 index정보와 선택한 row에 대한 데이터를 Object.assign({},item)으로 가져올 수 있었다.

 

추가로 @context:row

우클릭 시 함수를 호출 가능하다.

이때 v-menu를 숨겨놓고 true/false로 제어가 가능하다.

 

 

소스코드

vue template 

1
2
3
4
5
6
7
8
9
10
11
<v-data-table
        :headers="headers"
        :items="items"
        :search="searchQuery"
        :items-per-page="6"
        class="flex-grow-1"
        @contextmenu:row=showAdminMenu
        @dblclick:row=showRowInfo
      >
 cs

 

 

JS script

1
2
3
4
5
6
7
   showRowInfo (event, { item } ) {
      console.log(item)
      this.editedIndex = this.items.indexOf(item)
      this.editedItem = Object.assign({}, item)
      console.log(this.editedIndex)
      console.log(this.editedItem)
    }
 cs

 

 

출처 :

https://stackoverflow.com/questions/67788349/vuetify-how-to-get-row-by-double-click-event-in-v-data-table

 

Vuetify, how to get row by double click event in v-data-table

I need to get row by event but it only give me event and undefeated, how to catch items in v-data-table <v-data-table :headers="showHeaders" :page="page" ...

stackoverflow.com

 

저작자표시 (새창열림)