vue.js - 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>