Vue - 如何在 Vuetify 数据表的每一行中添加一个按钮？

Question

我是 Vue 的新手，我正在处理数据表。我正在使用 Vuetify 的数据表来创建一个组件，该组件在页面加载时向我的后端发送请求，接收一些数据并在数据表上显示该数据。

这是我当前的代码：

<template>
  <v-data-table
    :headers="headers"
    :items="balances"
    :items-per-page="5"
    class="elevation-1"
  ></v-data-table>
</template>

<script>


export default {
 
  data() {
    return {

      search: '',

      headers: [
        { text: 'Asset', value: 'symbol' },
        { text: 'Amount', value: 'amount' },
      ],

        balances: [],
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      fetch('MYURL')
        .then(response => response.json())
        .then(data => {
          this.balances = data;
        })
    }
  }
}

</script>

我现在面临的问题是为表格中的每一行添加一个按钮，并且这个按钮应该向我的后端发送一个包含该行数据的请求，所以我需要添加一个按钮，当点击该按钮时，可以获取行的数据。有没有办法做到这一点？我尝试查看 Vuetify 的文档，但我没有找到很多关于这样的任务的信息。

Answer 1

您可以添加一个新列，例如将值设置为action，然后在表格中添加一个slot，如下所示：

new Vue({
  el:"#app",
  vuetify: new Vuetify(),
  data() {
    return {
      search: '',
      headers: [
        { text: 'Asset', value: 'symbol' },
        { text: 'Amount', value: 'amount' },
        { text: 'Send', value: 'action' }
      ],
      balances: [
        { symbol: "$", amount: 100 },
        { symbol: "$", amount: 200 },
      ],
    }
  },
  methods: {
    sendRequest(rowData) {
      console.log(rowData)
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<v-app id="app">
  <v-data-table
    :headers="headers"
    :items="balances"
    :items-per-page="5"
    class="elevation-1"
  >
    <template v-slot:item.action="{ item }">
      <v-btn @click="sendRequest(item)">
        Send
      </v-btn>
    </template>
  </v-data-table>
</v-app>