vue做表格實現增刪改查

問題：vue 中實現表格增刪改查的方法？答案：增：創建新對象並添加到數據數組。刪：獲取要刪除行的索引並從數組中刪除。改：更新數據的副本並同步原始對象。查：訪問數據模型或使用過濾器/索引獲取特定行數據。

Vue 實現表格增刪改查

增

1. 在表格數據模型中創建新對象。
2. 使用 push 方法將新對象添加到數據數組。
3. 觸發表格組件的 update:modelValue 事件，使表格重新加載數據。

刪

1. 獲取要刪除行的索引。
2. 使用 splice 方法從數據數組中刪除該行。
3. 觸發 update:modelValue 事件。

改

立即學習“前端免費學習筆記（深入）”；

1. 在表格中的輸入或編輯控件中更新數據的副本。
2. 使用 Vue.set 方法將數據副本中的更改與原始對象同步。
3. 觸發 update:modelValue 事件。

查

1. 訪問表格數據模型，它包含所有行的數據。
2. 使用過濾器在數據中進行搜索或排序。
3. 訪問特定的行數據，通過傳入索引或 id。

示例代碼

<template>  <v-data-table    :headers="headers"    :items="items"    :item-key="item => item.id"  >    <template v-slot:item.actions="{ item }">      <v-btn icon @click="remove(item)">        <v-icon>mdi-delete</v-icon>      </v-btn>    </template>    <template v-slot:item.name="{ item }">      <v-text-field v-model="item.name" @input="update(item)"></v-text-field>    </template>  </v-data-table></template><script>import { ref } from 'vue';export default {  setup() {    const items = ref([{ id: 1, name: 'Item 1' }]);    const remove = (item) => {      const idx = items.value.findIndex(i => i === item);      items.value.splice(idx, 1);    };    const update = (item) => {      Vue.set(item, 'name', item.name);    };    return {      items,      remove,      update    };  }};</script>

登錄後複製

以上就是vue做表格實現增刪改查的詳細內容，更多請關注本站其它相關文章！