데이터 테이블에 작업 버튼을 삽입하고 행 데이터를 가져옵니다.

데이터 테이블에 작업 버튼을 삽입하고 행 데이터를 가져옵니다.

환경:

vue@^2.6.10:
vuetify@^2.1.0

사용하고 싶다v-data-table검색 결과를 표시하고 평가 버튼을 각 행에 추가합니다.v-data-table.

유감스럽게도 두 가지 문제가 있습니다.

1. [평가(Evaluate)]버튼이 표시되지 않습니다.
2. 누른 버튼의 행 데이터를 가져오는 방법을 모릅니다.

무엇을 바꿔야 하나요?

템플릿

    <v-data-table
            :headers="headers"
            :items="search_result"
    >
        <template slot="items" slot-scope="row">
            <td>{{row.item.no}}</td>
            <td>{{row.item.result}}</td>
            <td>
                <v-btn class="mx-2" fab dark small color="pink">
                    <v-icon dark>mdi-heart</v-icon>
                </v-btn>
            </td>
        </template>
    </v-data-table>

대본

data () {
            return {
                headers: [
                    { text: 'no', value: 'no' },
                    { text: 'result', value: 'result' },
                    { text: 'good', value: 'good'},
                ],
                // in real case initial search_result = [], and methods: search function inject below data
                search_result: [{no: 0, result: 'aaa'}, {no:2, result: 'bbb'],
            }
        },

1. "행의 기본 렌더링 대체"에 사용되는 슬롯 이름은 다음과 같습니다.item,것은 아니다.items
2. 포장 추가<tr>슬롯 템플릿으로
3. 추가만 하면 됩니다.@click="onButtonClick(row.item)로.v-btn메서드를 만듭니다.onButtonClick

    <v-data-table :headers="headers" :items="search_result">
      <template v-slot:item="row">
          <tr>
            <td>{{row.item.no}}</td>
            <td>{{row.item.result}}</td>
            <td>
                <v-btn class="mx-2" fab dark small color="pink" @click="onButtonClick(row.item)">
                    <v-icon dark>mdi-heart</v-icon>
                </v-btn>
            </td>
          </tr>
      </template>
    </v-data-table>

methods: {
    onButtonClick(item) {
      console.log('click on ' + item.no)
    }
  }

주의사항..

...위의 내용은 기본 행 렌더링을 사용자 자신의 행 렌더링으로 대체하고 있으므로 다음 중 일부는v-data-table기능이 작동하지 않습니다(시도하지 않았지만 행 선택, 그룹화, 편집 등이 중단될 수 있습니다).문제가 있는 경우는, 다음의 대체 솔루션을 참조해 주세요.

1. 헤더 정의에 열을 하나 더 추가합니다.{ text: "", value: "controls", sortable: false }
2. 덮어쓰기 안 함itemslot(행 렌더링).오버라이드item.controls대신 슬롯을 사용합니다."controls"는 열 정의와 동일합니다. "controls" 열의 렌더링만 우선합니다.
3. 다른 건 다 똑같아

    <v-data-table :headers="headers" :items="search_result">
      <template v-slot:item.controls="props">
        <v-btn class="mx-2" fab dark small color="pink" @click="onButtonClick(props.item)">
          <v-icon dark>mdi-heart</v-icon>
        </v-btn>
      </template>
    </v-data-table>

내 경우 마이클의 해결책은 다음과 같은 예외를 두는 것이었다.

솔루션에서는slot그리고.slot-scope

<template>
    <v-data-table
        :headers="headers"
        :items="items"
        class="elevation-1"
    >
        <template slot="item.delete" slot-scope="props">
            <v-btn class="mx-2" icon @click="() => delete(props.item)">
                <v-icon dark>mdi-delete</v-icon>
            </v-btn>
        </template>
    </v-data-table>
</template>

<script>
export default {
    data() {
        return {
            headers: [
                // Dynamic headers
                {
                    text: 'Name',
                    value: 'name'
                },
                {
                    text: '',
                    // Row to replace the original template
                    value: 'delete'
                },
            ],
            items: [
                {
                    id: 1,
                    name: 'A'
                },
                {
                    id: 2,
                    name: 'B'
                }
            ]
        };
    },
    methods: {
        delete(item) {
            this.items = this.items.filter((d) => d.id !== item.id);
        },
    },
};
</script>

언급URL : https://stackoverflow.com/questions/59081299/vuetify-insert-action-button-in-data-table-and-get-row-data