avue-crud :option

### 关于 `avue-crud` 组件的选项配置 #### 1. 基本概念 `avue-crud` 是基于 Vue.js 封装的高度自定义表格组件，通过简单的配置项可以快速实现增删改查功能[^1]。 #### 2. Option 配置结构 Option 对象用于控制表格的行为和外观。以下是常用的一些属性： - **column**: 定义列的信息数组，每列表示一行记录中的某个字段。 | 属性名 | 类型 | 描述 | |------------|--------|-------------------------------------------------------------| | label | String | 列头显示的文字 | | prop | String | 字段名称 | | type | String | 数据类型 (text, number, date 等) | - **data**: 表格的数据源，默认为空数组[]. - **page**: 分页设置对象 | 属性名 | 类型 | 默认值 | 描述 | |--|--------|-----------|------------------------------| | pageSize | Number | 10 | 每页条数 | | currentPage | Number | 1 | 当前页面 | | total | Number | 0 | 总条目数量 | - **rowKey**: 设置唯一标识符键名，默认为'id'。 ```javascript const options = { column: [ {label: "姓名", prop: "name"}, {label: "年龄", prop: "age"} ], data: [], page: {}, rowKey: 'id' }; ``` #### 3. 功能扩展配置 为了满足更复杂的需求，还可以进一步定制化配置: - **searchRender**: 自定义查询栏渲染函数。 - **menuBtn**: 是否启用菜单按钮，默认开启(true)，可设false关闭。 - **addBtn**, **editBtn**, **delBtn**: 控制新增、编辑、删除操作按钮的状态。 - **beforeOpenDone**(done): 打开弹窗之前的钩子方法； 更多高级特性如分组展示、树形结构支持等也都可以通过相应配置完成[^2]。 #### 4. 实际应用案例 下面是一个完整的实例演示如何利用上述提到的各种配置来构建一个带有基本CRUD能力的表格界面[^3]: ```html <template> <div id="app"> <!-- 使用 avue-crud 创建 CRUD 表 --> <avue-crud :option="options"></avue-crud> </div> </template> <script> export default { name: 'App', data() { return { options: { // ...其他省略部分... // 添加一些额外的功能开关 menuAlign:"center", searchShow:false, dialogWidth:'50%', addBtn:true, editBtn:true, delBtn:true, // 远程加载数据的方法 onLoad:async function({currentPage,pageSize}) { const res=await this.$axios.get('/api/users', { params:{_p:currentPage,_size:pageSize} }); this.data=res.data.list; this.page.total=res.data.count; } } }; }, }; </script> ```