【问题标题】：Vuetify insert action button in data-table and get row dataVuetify 在数据表中插入操作按钮并获取行数据
【发布时间】：2020-03-23 15:57:13
【问题描述】：

环境：

vue@^2.6.10:
vuetify@^2.1.0

我想使用v-data-table 显示搜索结果并在v-data-table 的每一行中添加评估按钮。

不幸的是我有两个问题：

评估按钮未显示
我不知道如何获取按下按钮的行数据

我需要改变什么？

模板

    <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'],
            }
        },

【问题讨论】：

标签： vue.js vuejs2 vue-component vuetify.js

【解决方案1】：

用于“替换行的默认渲染”的槽名是item，而不是items
在槽模板中添加包装<tr>
只需将@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 功能不起作用（没有尝试，但我希望行选择、分组、到位编辑等将被破坏）。如果这对您来说是个问题，这里是替代解决方案：

在标题定义中再添加一列：{ text: "", value: "controls", sortable: false }
不要覆盖item 槽（行渲染）。改写 item.controls 插槽。请注意，“控件”与列定义中的相同 - 我们仅覆盖“控件”列的呈现
其他一切都一样

    <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>

【讨论】：

太棒了，正是我想要的。但是它不会影响数据表的某些内置功能吗？
@user1729972 这可能是因为您正在用自己的替换默认行渲染模板。好点子。我将在我的答案中添加替代解决方案...

【解决方案2】：

在我的情况下，Michal 的解决方案是抛出以下异常

解决方案是使用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>

【讨论】：