从零搭建一个后台管理页：手把手教你用Avue-Crud配置增删改查（Vue3 + Element Plus版）

从零搭建产品管理系统：基于Avue-Crud的Vue3实战指南

在当今快节奏的前端开发领域，低代码解决方案正逐渐成为提升开发效率的利器。Avue-Crud作为基于Element Plus的Vue3组件库，通过JSON配置即可快速生成功能完善的管理界面，特别适合需要快速迭代的中后台系统开发。本文将带你从零开始，构建一个完整的产品信息管理系统，涵盖从环境搭建到复杂表单交互的全流程。

1. 项目初始化与环境配置

首先确保已安装Node.js（建议版本16+），然后通过Vite创建Vue3项目：

npm create vite@latest product-admin --template vue-ts cd product-admin npm install element-plus @smallwei/avue axios

在main.ts中完成基础配置：

import { createApp } from 'vue' import ElementPlus from 'element-plus' import Avue from '@smallwei/avue' import App from './App.vue' import 'element-plus/dist/index.css' import '@smallwei/avue/lib/style.css' const app = createApp(App) app.use(ElementPlus) app.use(Avue) app.mount('#app')

创建src/api/product.ts定义接口服务：

import axios from 'axios' const instance = axios.create({ baseURL: 'https://api.example.com' }) export const getProductList = (params: any) => instance.get('/products', { params }) export const createProduct = (data: any) => instance.post('/products', data) export const updateProduct = (id: string, data: any) => instance.put(`/products/${id}`, data) export const deleteProduct = (id: string) => instance.delete(`/products/${id}`)

2. 核心CRUD配置实战

在ProductView.vue中构建基础表格结构：

<template> <avue-crud :data="tableData" :option="option" :page="page" @row-save="handleCreate" @row-update="handleUpdate" @row-del="handleDelete" @search-change="handleSearch" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> </template> <script setup lang="ts"> import { ref } from 'vue' import { getProductList, createProduct, updateProduct, deleteProduct } from '@/api/product' const tableData = ref([]) const page = ref({ total: 0, currentPage: 1, pageSize: 10 }) const option = ref({ title: '产品管理', border: true, index: true, viewBtn: true, editBtn: true, delBtn: true, addBtn: true, dialogWidth: '50%', column: [ { label: '产品名称', prop: 'name', search: true, rules: [{ required: true, message: '请输入产品名称' }] }, { label: '产品分类', prop: 'category', type: 'select', dicData: [ { label: '电子产品', value: 1 }, { label: '家居用品', value: 2 } ] } ] }) const loadData = async () => { const res = await getProductList({ page: page.value.currentPage, size: page.value.pageSize }) tableData.value = res.data.records page.value.total = res.data.total } // 初始化加载数据 loadData() </script>

3. 高级表单配置技巧

3.1 复杂表单字段配置

扩展column配置实现多样化表单控件：

const option = ref({ // ...其他配置 column: [ // ...基础配置 { label: '产品价格', prop: 'price', type: 'number', minRows: 0, precision: 2, rules: [ { required: true, message: '请输入价格' }, { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入合法金额' } ] }, { label: '上架时间', prop: 'publishDate', type: 'datetime', format: 'yyyy-MM-dd HH:mm', valueFormat: 'yyyy-MM-dd HH:mm:ss', rules: [{ required: true, message: '请选择上架时间' }] }, { label: '产品图片', prop: 'images', type: 'upload', listType: 'picture-card', action: '/api/upload', propsHttp: { res: 'data', url: 'url' }, multiple: true, limit: 5 }, { label: '产品描述', prop: 'description', type: 'textarea', minRows: 4, maxlength: 500, showWordLimit: true } ] })

3.2 表单分组优化

使用group实现表单分区展示：

const option = ref({ // ...其他配置 group: [ { label: '基本信息', icon: 'el-icon-info', prop: 'base', column: [ { label: '产品名称', prop: 'name' }, { label: '产品分类', prop: 'category' } ] }, { label: '销售信息', icon: 'el-icon-shopping-cart-full', prop: 'sale', column: [ { label: '产品价格', prop: 'price' }, { label: '库存数量', prop: 'stock' } ] }, { label: '媒体信息', icon: 'el-icon-picture', prop: 'media', column: [ { label: '主图展示', prop: 'mainImage' }, { label: '详情图集', prop: 'detailImages' } ] } ] })

4. 业务逻辑与交互优化

4.1 实现完整CRUD操作

完善组件的事件处理方法：

const handleCreate = async (row: any, done: Function) => { try { await createProduct(row) ElMessage.success('创建成功') loadData() done() } catch (error) { done() ElMessage.error('创建失败') } } const handleUpdate = async (row: any, index: number, done: Function) => { try { await updateProduct(row.id, row) ElMessage.success('更新成功') loadData() done() } catch (error) { done() ElMessage.error('更新失败') } } const handleDelete = async (row: any) => { try { await ElMessageBox.confirm('确认删除该产品?', '提示', { type: 'warning' }) await deleteProduct(row.id) ElMessage.success('删除成功') loadData() } catch (error) { ElMessage.info('已取消删除') } }

4.2 高级搜索与分页控制

const searchForm = ref({}) const handleSearch = (params: any, done: Function) => { searchForm.value = params loadData() done() } const handleSizeChange = (val: number) => { page.value.pageSize = val loadData() } const handleCurrentChange = (val: number) => { page.value.currentPage = val loadData() }

5. 性能优化与最佳实践

5.1 配置项优化技巧

const option = ref({ // 启用表格缓存 cache: true, // 表单提交后自动刷新 refreshBtn: true, // 弹窗关闭时销毁内部元素 destroyOnClose: true, // 表格自适应高度 calcHeight: true, // 表单标签宽度 labelWidth: '120px', // 菜单栏按钮位置 menuPosition: 'center', // 空数据提示 emptyText: '暂无数据', // 自定义搜索栏布局 searchMenuSpan: 6, // 表格斑马纹 stripe: true })

5.2 自定义组件集成

实现富文本编辑器集成：

// 安装依赖 npm install @wangeditor/editor @wangeditor/editor-for-vue // 在组件中引入 import { Editor } from '@wangeditor/editor-for-vue' const option = ref({ column: [ { label: '产品详情', prop: 'content', component: Editor, componentProps: { config: { placeholder: '请输入产品详情...', MENU_CONF: { uploadImage: { server: '/api/upload' } } } } } ] })

6. 常见问题解决方案

表格渲染性能问题：

• 大数据量时启用虚拟滚动：

  const option = ref({ virtualScroll: true, virtualScrollItemSize: 54 })

表单验证失效处理：

const validatePrice = (rule: any, value: any, callback: any) => { if (value < 0) { callback(new Error('价格不能为负数')) } else { callback() } } const option = ref({ column: [ { label: '产品价格', prop: 'price', rules: [ { validator: validatePrice, trigger: 'blur' } ] } ] })

接口数据格式适配：

const option = ref({ // 接口返回数据适配 props: { page: 'current', size: 'size', total: 'total', records: 'records' }, // 请求参数格式化 parseData: (res) => { return { code: res.code, data: res.data.records, total: res.data.total } }, // 请求前数据处理 requestBefore: (params) => { return { ...params, sort: 'createTime,desc' } } })

在项目开发过程中，我发现Avue-Crud的refresh方法非常实用，可以在数据变更后手动刷新表格。另外，合理使用cell-class-name属性可以为特定条件下的行添加自定义样式，这在状态展示场景下特别有用。