Vuetify - 在 v-data-table 中，我想使用 tbody 并在每一行中添加其他组件

Question

我一直在Vuetify.js框架中使用v-data-table，我需要在v-data-table中添加一些按钮和textfield。 v-data-table 真的很有用，但是我添加其他组件真的很难。 这是我的第一个实验，但没有成功。 我想在每一行中添加v-btn。 但是“发生错误”。错误信息在我的代码下。

有人给我建议吗？

    <template>
    <div>
        <v-data-table
         dense
         :headers="header"
         :items="items"
         class="elevation-1"
         >
         <template v-slot:body="{ items}">
             <tbody>
                 <tr v-for="item in items" :key="item.email">
                     <td>{{item.name}}</td>
                     <td>{{item.email}}</td>
                     <td><v-btn @click="deleteRow(item)">delete</v-btn></td>
                 </tr>
             </tbody>
         </template>
        </v-data-table>
    </div>
</template>

<script lang="ts">
import {Component, Vue} from 'nuxt-property-decorator'
import axios from 'axios'

@Component({})
export default class extends Vue{
    header = [
        {text:'name',value:'name'},
        {text:'email',value:'email'},
        {text:'Actions',value:'actions',sortable:false}
    ]
    items:any=[]
    deleteRow(index:any){
       let item=this.items.findIndex((it:any)=>it.email===item.email)
        this.items.splice(index,1);
    }
    async mounted(){
        const response = await axios.get('https://jsonplaceholder.typicode.com/users');
        this.items = response.data.map((item:any)=>({
            name:item.name,
            email:item.email
        }));
    }
    
}
</script>

[错误信息]

TypeError：无法读取未定义的属性“电子邮件” 在 eval (axiostest4.vue?eedd:35) ....

Answer 1

尝试使用 <template v-slot:item.actions="{ item }"> 以访问当前项目（行）

 <v-data-table
         dense
         :headers="header"
         :items="items"
         class="elevation-1"
         >
        <template v-slot:item.actions="{ item}">
             <v-btn @click="deleteRow(item )">delete</v-btn>
       </template>
        </v-data-table>

方法：

 deleteRow(item:any){
      let index=this.items.findIndex(it=>it.email===item.email)
        this.items.splice(index,1);
    }

标题：

  header = [
        {text:'name',value:'name'},
        {text:'email',value:'email'},
       ,
      {
        text: 'Actions',
        value: 'actions',
        sortable: false
      },
    ]

其他字段自动呈现

var app = new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    employees: [{
        "id": "1",
        "employee_name": "Tiger Nixon",
        "employee_salary": "320800",
        "employee_age": "61",
        "profile_image": ""
      },
      {
        "id": "2",
        "employee_name": "Garrett Winters",
        "employee_salary": "170750",
        "employee_age": "63",
        "profile_image": ""
      },
      {
        "id": "3",
        "employee_name": "Ashton Cox",
        "employee_salary": "86000",
        "employee_age": "66",
        "profile_image": ""
      },
      {
        "id": "4",
        "employee_name": "Cedric Kelly",
        "employee_salary": "433060",
        "employee_age": "22",
        "profile_image": ""
      },
      {
        "id": "5",
        "employee_name": "Airi Satou",
        "employee_salary": "162700",
        "employee_age": "33",
        "profile_image": ""
      },
      {
        "id": "6",
        "employee_name": "Brielle Williamson",
        "employee_salary": "372000",
        "employee_age": "61",
        "profile_image": ""
      }
    ],
    headers: [{
        text: 'ID',
        value: 'id'
      },

      {
        text: 'employee name',
        value: 'employee_name'
      },
      {
        text: 'employee salary',
        value: 'employee_salary'
      },
      {
        text: 'employee age',
        value: 'employee_age'
      },
      {
        text: 'Actions',
        value: 'actions',
        sortable: false
      },
    ]
  },
  methods: {
    deleteRow(item) {
      let index = this.employees.findIndex(emp => emp.id === item.id)
      this.employees.splice(index, 1);
    }
  }

})

<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@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

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

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
  <v-app id="inspire">
    <v-data-table :headers="headers" :items="employees" class="elevation-1">
      <template v-slot:item.actions="{ item }">
             <v-btn @click="deleteRow(item)">delete</v-btn>
       </template>
    </v-data-table>
  </v-app>
</div>