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做表格实现增删改查的详细内容，更多请关注本站其它相关文章！