vue.js - Vuetify 在数据表中插入操作按钮并获取行数据

Question

环境:

vue@^2.6.10:
vuetify@^2.1.0

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

不幸的是我有两个问题:

1. 不显示评估按钮
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'],
            }
        },

Answer 1

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. 不要覆盖 item槽(行渲染)。覆盖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>