简单写一个Avue增删改查
今天练习了一下avue，真的好用，个人感觉相比于用element plus的组件还方便！
简简单单的写了一个页面的增删改查，思路很简单。如果在写那种后台管理项目，基本上全是列表页，用这种方法写出来第一页，基本上只要是列表页、简单的增删改查，直接cv过去更改接口，没有比较棘手的功能单纯的写这些。基本上一个小时就可以拿下小项目。
例子中没写分页，只写了增删改查，基本上一百行代码。
这练习的项目框架是我在gitee随便找了一个
链接：avue-cli: 基于 vue3 + vite + element plus + avue3 + vue-router + vuex，适配手机、平板、pc 的后台开源免费模板，希望减少工作量，帮助大家实现快速开发。 (gitee.com)
效果：
element组件方式：
element使用最基本的方法也就是差不多这样，输入框需要使用到v-model去作处理。添加以后还需要将弹出层已经添加过的数据做一个清空的处理等等...
avue方式：
这是avue写法，只需要看form，没有input，没有v-model，直接就处理好了
增删改查事件：
row-save 新增数据后点击确定触发该事件 row,done,loading row-update 更新数据后确定触发该事件 row,index,done,loading row-del 行数据删除时触发该事件 row,index search-reset 清空搜索回调方法 - search-change 点击搜索后触发该事件(由于page分页信息和search搜索信息是sync修饰符，可以直接通过this.page和this.search拿到) form,done
参考：Crud属性文档 | Avue (avuejs.com)
实例代码如下：
<template><basic-container><h3>表格例子</h3><avue-crud :option="option" :data="data" @row-save="rowSave" @row-del="rowDel" @row-update="rowUpdate"@search-change="searchChange" @search-reset="resetChange"></avue-crud></basic-container>
</template>
<script setup>
import { ref, reactive } from 'vue';
import axios from 'axios';
import qs from 'qs';
const option = ref({column: [{label: '序号',prop: 'id',row: true,}, {label: '姓名',prop: 'name',row: true,search: true,}, {label: "分类图片",prop: "img",span: 14,row: true,align: "center",listType: "picture-img",type: "upload",propsHttp: {home: "域名/url",},action: "上传接口", //上传接口}]
})
const data = ref([]);
const datas = ref([]);
function list() {axios({method: "post",url: "列表接口",data: qs.stringify({})}).then((res) => {data.value = res.data.data.reverse();//将列表中数据颠倒过来，id从小到大排序datas.value = res.data.data;console.log(res);})
}
list();
//搜索
const searchChange = (params, done) => {data.value = datas.value.filter((item) => item.name.match(params.name));//搜索，过滤拿到namesetTimeout(() => {done();}, 1500)
};
const resetChange = () => {setTimeout(() => {list();}, 10)
};
// 添加
const rowSave = (form, loading, done) => {axios({method: "post",url: "添加接口",data: qs.stringify({name: form.name,img: form.img,})}).then((res) => {console.log(res, '添加成功！！');list();setTimeout(() => {loading(form);}, 1000)setTimeout(() => {done(form);}, 2000)})
}
//删除
const rowDel = (form) => {axios({method: "post",url: "删除接口",data: qs.stringify({id: form.id,})}).then((res) => {console.log(res, '删除！！');list();setTimeout(() => {loading(form);}, 1000)setTimeout(() => {done(form);}, 2000)})
}
//更新/编辑
const rowUpdate = (form, loading, done) => {axios({method: "post",url: "编辑接口",data: qs.stringify({id: form.id,img: form.img,name: form.name,})}).then((res) => {console.log(res, '编辑成功！！');list();setTimeout(() => {loading(form);}, 10)setTimeout(() => {done(form);}, 100)})
}
</script><style></style>需要注意的是！！！
因为他的架构导致列表中的数据在新增的弹窗中都会出现！就比如说：你这个添加的功能不需要id这个数据，只需要添加姓名和年龄就ok，但是列表中你渲染的是有id那一选项的，那么在添加和编辑的弹窗中都会出现id的输入框，这个目前还没有研究怎样去给他删除掉，但是只要接口说明id不需要必填可以不填。
如图，只要是你定义在这个列表代码块中的数据他都会显示在新增/编辑的弹窗中。
