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

问题描述

环境:

vue@^2.6.10:
vuetify@^2.1.0

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

I want to use v-data-table to show search results and add evaluate button in each row in the v-data-table.

很遗憾，我有两个问题:

Unfortunately I have two issues:

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

推荐答案

1. 用于替换行的默认呈现"的插槽名称是 item，不是 items
2. 将 添加到插槽模板中
3. 只需将 @click="onButtonClick(row.item) 添加到 v-btn 并创建方法 onButtonClick

1. slot name used to "replace the default rendering of a row" is item, not items
2. Add wrapping <tr> into slot template
3. Just add @click="onButtonClick(row.item) to v-btn and create method 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 功能不起作用(未尝试但我希望行选择、分组、就地编辑等将被破坏).如果这对您来说是个问题，这里是替代解决方案:

Note..

...solution above is replacing default row rendering with your own so expect some of the v-data-table features to not work (didn't try but I expect row selection, grouping, in place editing etc. will be broken). If that's problem for you, here is alternative solution:

1. 在标题定义中再添加一列:{ text: "", value: "controls", sortable: false }
2. 不要覆盖 item 槽(行渲染).改写 item.controls 插槽.注意控制"与列定义中的相同 - 我们只是覆盖了控件"的呈现专栏
3. 其他都一样

1. Add one more column to your headers definition: { text: "", value: "controls", sortable: false }
2. Do not override item slot (row rendering). Override item.controls slot instead. Notice "controls" is the same as in column definition - we are overriding just rendering of "controls" column
3. Everything else is same

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

这篇关于Vuetify 在数据表中插入操作按钮并获取行数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！