Vue: v-data-table에 버튼 넣는법

 

 

 

 

처음에 어떻게 넣을지 곤란했지만

 

구글링..이 답.

 

 

 

 headers = [
    {
      text: "순번",
      align: "start",
      sortable: false,
      value: "number",
    },

데이터가 이런식이라면

 

 

 

 

버튼을 넣고자 하는 데이터 위치에

 

  { text: "", value: "action" }

를 넣어준다. (value값은 원하는대로 작명해도된다.)

 

 

 

 

 

 

그리고 데이터 테이블 태그안에 template v-slot:item.action={"item"}

 

요런식으로 넣고 버튼 넣으면 끝!!

 

 

    <v-data-table
      :headers="headers"
      :items="data"
      :page.sync="page"
      :items-per-page="itemsPerPage"
      hide-default-footer
      class="elevation-1"
      @page-count="pageCount = $event"
    >
      <template v-slot:item.action="{item}">
        <td>
          <v-btn>수정</v-btn>
        </td>
      </template>
    </v-data-table>

 

 

 

참고링크

https://www.appsloveworld.com/vuejs/100/89/in-vuetify-how-to-add-a-button-into-each-row-in-v-data-table