1

我有一个v-data-table有一些通用员工数据的。我想知道我是否可以获得我点击的确切值。

我当前的代码很简单，其中的一个片段看起来像这样。

编辑：我正在使用官方 vuetify 文档中的 CRUD-Actions 示例：https ://vuetifyjs.com/en/components/data-tables/

<v-data-table 
    :headers="headers" 
    :items="rows" 
    item-key="name" 
    :search="search" >

    <template v-slot:top>
        <!-- A dailog box is present here to edit the rows-->                   
    </template>

    <template v-slot:item.actions="{ item }">
        <v-icon small class="mr-2" @click="editItem(item)">
            mdi-pencil
        </v-icon>
    </template>

</v-data-table>

另外，是否可以获取其列名？（上面代码中的标题）谢谢！

4

1 回答 1

2

v-data-table 根据https://vuetifyjs.com/en/components/data-tables/的文档，您可以使用项目插槽：

<v-data-table
    :headers="headers"
    :items="desserts"
    :items-per-page="5"
    class="elevation-1"
  >    
    <template v-slot:item="props">
       <tr>      
          <td v-for="(prop, key) in props.item" :key="key" @click="onClickItem(key, props.item[key])">{{props.item[key]}}</td>
       </tr>
    </template>
</v-data-table>

并获取项目：

methods:{
  onClickItem(columName, value) {
     console.log(columName, value)
  },
}

更新

如果您想添加另一列，例如操作，请不要使用v-slot:item.actions插槽，因为v-slot:item will会覆盖它。修改此道具以获得所需的结果。

<v-data-table
    :headers="headers"
    :items="desserts"
    :items-per-page="5"
    class="elevation-1"
  >    
    <template v-slot:item="props">
     <tr>
      <td v-for="(prop, key) in props.item" :key="key" @click="onClickItem(key, props.item[key])">{{props.item[key]}}</td>

      <!-- This is for actions -->
      <td>
        <v-icon small class="mr-2" @click="editItem(item)">
          mdi-pencil
        </v-icon>
        <v-icon small @click="deleteItem(item)">
          mdi-delete
        </v-icon>
      </td>
     </tr>
    </template>
</v-data-table>

检查这个代码笔：https ://codepen.io/hans-felix/pen/bGVzoOj

于 2020-05-18T22:20:24.477 回答