vue.js - Vue.js与Vuetify怎么实现可编辑的表格单元格？

Question

vue-vuetify怎么实现表格单元格可编辑，并且能获取到输入的值呢？

Answer 1

在 Vue.js 和 Vuetify 中，你可以使用内置的组件和特性来实现可编辑的表格单元格。以下是一个简单的例子，展示了如何创建一个可编辑的表格，并获取输入的值：

<template>  <v-data-table    :headers="headers"    :items="items"    class="elevation-1"  >    <template v-slot:items="props">      <tr :key="props.item.id">        <td v-for="(header, index) in headers" :key="header.text">          <v-text-field            v-model="props.item[header.value]"            v-if="props.item.id === editableRow"            @blur="saveEdit(props.item)"            :label="header.text"            single-line            hide-details          ></v-text-field>          <span v-else>{{ props.item[header.value] }}</span>        </td>      </tr>    </template>  </v-data-table></template><script>export default {  data() {    return {      headers: [        { text: 'Name', value: 'name' },        { text: 'Email', value: 'email' },        // Add more headers as needed      ],      items: [        { id: 1, name: 'John Doe', email: '[e-mail]' },        { id: 2, name: 'Jane Doe', email: '[e-mail]' },        // Add more items as needed      ],      editableRow: null,    };  },  methods: {    editItem(item) {      this.editableRow = item.id;    },    saveEdit(item) {      // Do something with the edited item, e.g., save it to a database      this.editableRow = null;    },  },};</script>

在这个例子中，我们使用了 v-data-table 组件来显示表格数据。headers 数组定义了表格的列，items 数组包含了表格的数据。

我们使用了 v-slot:items 插槽来自定义表格单元格的渲染。在单元格中，我们使用了 v-text-field 组件来创建一个可编辑的文本字段。当 props.item.id 等于 editableRow 时，我们显示文本字段，否则我们显示文本。

我们还定义了两个方法：editItem 和 saveEdit。editItem 方法用于开始编辑某个行，它将 editableRow 设置为要编辑的行的 id。saveEdit 方法用于保存编辑后的行，你可以在这里添加你自己的逻辑，比如将编辑后的行保存到数据库。

注意，这只是一个简单的例子，你可能需要根据你的具体需求进行修改和扩展。例如，你可能需要添加更多的特性，比如错误处理、数据验证等。