vue2实现增删改查操作
时间: 2023-07-18 09:03:49 浏览: 47
Vue2可以通过使用组件来实现增删改查操作。下面是一个简单的示例:
1. 创建一个数据列表组件,用于显示数据列表和操作按钮。
```
<template>
<div>
<table>
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in list" :key="index">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>
<button @click="editItem(index)">编辑</button>
<button @click="deleteItem(index)">删除</button>
</td>
</tr>
</tbody>
</table>
<button @click="addItem">添加</button>
</div>
</template>
<script>
export default {
props: {
list: {
type: Array,
default: () => []
}
},
methods: {
addItem() {
// 添加操作
},
editItem(index) {
// 编辑操作
},
deleteItem(index) {
// 删除操作
}
}
};
</script>
```
2. 在父组件中使用数据列表组件,并传递数据列表数据和相关操作函数。
```
<template>
<div>
<my-list :list="list" @add-item="addItem" @edit-item="editItem" @delete-item="deleteItem"></my-list>
</div>
</template>
<script>
import MyList from '@/components/MyList.vue';
export default {
components: {
MyList
},
data() {
return {
list: [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' },
{ id: 3, name: '王五' }
]
};
},
methods: {
addItem() {
// 添加操作
},
editItem(index) {
// 编辑操作
},
deleteItem(index) {
// 删除操作
}
}
};
</script>
```
3. 在相关操作函数中对数据列表进行增删改查操作。
```
methods: {
addItem() {
const id = this.list.length + 1;
this.list.push({ id, name: '' });
},
editItem(index) {
// 打开编辑框,将该项数据传递给编辑框组件
},
deleteItem(index) {
this.list.splice(index, 1);
}
}
```