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

Posted 2023-02-23

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

【英文标题】：Vuetify - In v-data-table, I want to use tbody and to add other component in each row

【发布时间】：2020-11-27 05:31:42

【问题描述】：

我一直在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) ....

【参考方案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>