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

标签： vue.jsvuejs2vue-componentvuetify.js

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插槽。注意“控件”与列定义中的相同 - 我们仅覆盖“控件”列的呈现
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>