avue-crud的增删改查
时间: 2024-12-30 16:29:14 浏览: 49
### avue-crud 中实现增删改查功能
#### 创建组件文件
在 `components` 文件夹中,创建一个新的 `.vue` 文件,例如:`AvueCrudTable.vue`[^1]。
```html
<template>
<div>
<avue-crud :option="option" @row-save="handleSave" @row-update="handleUpdate"
@row-del="handleDelete">
</avue-crud>
</div>
</template>
<script>
export default {
data() {
return {
option: {
column: [
{ label: 'ID', prop: 'id' },
{ label: '名称', prop: 'name' },
{ label: '年龄', prop: 'age' }
]
}
};
},
methods: {
handleSave(row, done) {
console.log('新增数据:', row);
this.$message.success('保存成功');
done();
},
handleUpdate(row, index, done) {
console.log('更新的数据:', row);
this.$message.success('修改成功');
done();
},
handleDelete({ row }) {
console.log('删除的数据:', row);
this.$message.success('删除成功');
}
}
};
</script>
```
此代码展示了如何配置基本的表格选项并处理增加、编辑和删除事件。对于查询功能,则可以通过设置过滤器或通过 API 获取数据来填充表格内容。
为了确保每次获取新表头时不会残留旧数据,在重新加载列定义之前可以先清空 `this.option.column` 数组:
```javascript
// 清除现有列定义后再添加新的列项
this.option.column = []; // 将其置为空数组
this.option.column.push({
label: "姓名",
prop: "name"
});
```
上述方法适用于需要动态改变显示字段的情况[^2]。
阅读全文
相关推荐


















