element-plus 使用avue-crud

Element Plus是一个基于Vue 3.x库的UI组件库，它提供了一套简洁、易用的界面元素。Avue Crud是一个基于Element Plus的CRUD操作工具包，它简化了数据增删改查的操作流程，让你能够快速地为前端应用添加表格展示和基础的数据管理功能。

在Element Plus中集成Avue Crud，通常涉及以下几个步骤：

1. **安装依赖**：首先需要在项目中安装`element-plus`和`@vue(avue)`及其crud相关的插件，通常是通过npm或yarn进行安装。

   npm install element-plus @vue/avue @vue/avue-crud

2. **配置引入**：在你的Vue组件中，导入必要的模块并注册Avue，然后初始化Avue实例，并关联到Element Plus的表单和表格组件。

   import { createApp } from 'vue';
   import ElementPlus from 'element-plus';
   import { Avue, AvueCrud } from '@vue/avue';

   createApp({
     components: {
       // 其他组件...
       ElTable: ElementPlus.Table,
       ElForm: ElementPlus.Form,
       ...AvueCrud components
     },
     setup() {
       const avue = new Avue();
       return {
         avue,
         // 使用AvueCrud方法
       };
     }
   }).mount('#app');

3. **使用AvueCrud组件**：你可以使用Avue提供的`<avue-crud>`标签来创建CRUD组件，只需要设置好数据源、表头和列配置即可开始编辑、查看和删除数据。

   <template>
     <avue-crud :data="tableData" :columns="columns" />
   </template>

   <script>
   export default {
     data() {
       return {
         tableData: [], // 数据源
         columns: [...], // 列配置
       };
     },
     methods: {
       fetchData() {
         // 获取数据的API调用
       },
     },
   };
   </script>