avue-crud 是一个基于 Vue.js 的开源组件库,用于快速构建表单、表格和数据管理的前端界面。它简化了常见的 CRUD(创建、读取、更新、删除)操作的开发过程,特别适用于管理系统或后台管理平台。
它是一个基于Element-plus低代码前端框架,它使用JSON 配置来生成页面,可以减少页面开发工作量,极大提升效率。
主要特点
- 快速生成表单和表格:通过简单的配置文件,你可以快速生成带有验证规则的表单,以及带分页、搜索、筛选等功能的表格。
- 内置丰富组件:avue-crud 内置了大量的表单组件和表格功能,如输入框、下拉框、日期选择器、开关、文件上传、图片上传等,支持多种类型的数据展示。
- 自定义插槽:支持自定义插槽,开发者可以根据业务需求自定义表单项或表格列的展示方式,灵活性高。
- 响应式布局:支持响应式设计,能够在不同设备上正常显示,如桌面端和移动端。
- 集成操作按钮:集成了常见的操作按钮(如新增、删除、编辑、查看),简化了常用的增删改查操作。
- 与第三方框架集成:可以与 Element-UI 等 UI 框架无缝结合,利用这些框架的组件进一步扩展功能。
官方帮助文档:https://avuejs.com/crud/crud-doc.html
本文主要针对一些常用的配置进行说明,因为刚开始接触的时候对框架可能不是很熟悉,官网不好查找。更多详细的用户可以去官网查看。
一、avue-crud 配置项参数
<avue-crud :option="option" // 绑定option 配置对象,用于定义 avue-crud 表格及表单的各类行为和外观 :table-loading="loading" // 表格等待框的控制,加载的时候转圈圈,设置true/false :data="data" // 绑定表格数据源,即表格显示的数据 v-model:page="page" // 双向绑定分页数据,page分页变量,具体参考page参数 :permission="permissionList" // 控制操作权限,表格多个按钮权限控制,采用函数方式可以精确到行控制 :before-open="beforeOpen" // 在打开表单之前执行回调,会暂停Dialog的打开,done用于打开Dialog,type为当前窗口的类型3.5.2新增loading方法function(done,type,loading)=>{} :before-close="beforeClose" // 在打开表单之前执行回调,会暂停Dialog的关闭,done用于关闭Dialog,type为当前窗口的类型function(done,type)=>{} v-model="form" // 双向绑定表单数据 ref="crud" // 通过 ref 获取 avue-crud 实例对象 在普通的DOM元素上使用,引用指向的就是DOM元素 @cell-click="handleCellClick" // 单元格单击触发事件 @row-click="handleRowClick" // 行单击触发事件 @row-update="rowUpdate" // 当用户点击“编辑”按钮并提交表单时,触发该事件 @row-save="rowSave" // 当用户点击“新增”按钮并提交表单时,触发该事件 @row-del="rowDel" // 当用户点击表格中的删除按钮时,触发该事件 @search-change="searchChange" // 当用户更改搜索条件时,点击搜索后触发该事件。 @search-reset="searchReset" // 当用户点击“清空”(重置)按钮时,触发该事件。 @selection-change="selectionChange" // 当用户选择或取消选择表格中的多选行时,触发该事件(操作复选框列) @current-change="currentChange" // 点击页码会调用current-change方法回调当前页数,返回当前第几页 @refresh-change="refreshChange" // 点击右上角刷新按钮触发事件 @on-load="onLoad" // 表格数据加载完成时触发 @on-load="onLoad" // 表格数据加载完成时触发 >
二、page 配置项参数
page: { currentPage: 1, // 当前页数 pageSize: 20, // 每页显示条目个数 total: 0, // 总条目数 pagerCount: 7, // 页码按钮的数量,当总页数超过该值时会折叠 background: true, // 是否为分页按钮添加背景色 layout: 'prev, pager, next, jumper, ->, total' // 组件布局,子组件名用逗号分隔 pageSizes: [10, 20, 30, 40, 50, 100] // 每页显示个数选择器的选项设置 }
三、option 配置项参数
option: { height: 'auto', // 表格高度 calcHeight: 30, // 表格高度差 column: [], // 表单列配置参考Column配置 tip: false, // 表格第一行提示是否显示:当前表格已选择 0 项 清空 border: true, // 是否显示边框 index: true, // 是否显示序号 indexLabel:'序号', // 并将索引字段设置为“序号”,默认是“#” selection: true, // 表格勾选列(即批量删除) searchShow: true, // 首次加载是否显示搜素拦 searchMenuSpan: 24, // 搜索按钮长度(搜索和清空按钮长度,两按钮居中) searchSpan: 6, // 搜索框长度最大长度24(每项搜索内容长度,包括字段名+文本框) searchBtn: false, // 搜索按钮是否显示 searchBtnText: '搜索', //搜索按钮显示文字,默认是“搜索” emptyBtn: false, // 清空(重置)按钮是否显示 emptyBtnText: '重置', // 清空按钮显示文字,默认是“清空” addBtn:true, //表格上方左侧新增按钮是否显示 addBtnText: '新增', // 新增按钮显示文字,默认是新增 menu: true, // 是否有操作栏 menuTitle: '操作', // 操作栏标题 viewBtn: 'true', // 操作栏查看按钮 viewBtnText: '查看', // 表格查看按钮文字 editBtn: true, // 操作栏修改按钮 editBtnText: '编辑', // 表格修改按钮文字 delBtn: true, // 操作栏表格删除按钮 delBtnText: '删除', // 表格删除按钮文字 addTitle: '新增', // 单击表格上方新增按钮,表格弹窗新增页面的标题 editTitle: '编辑', // 单击操作栏修改按钮,表格弹窗修改页面的标题 viewTitle: '查看', // 单击操作栏查看按钮,表格弹窗查看页面的标题 updateBtn: true, // 单击操作栏修改按钮,表格弹窗页面的修改按钮是否显示 updateBtnText: '修改', // 表格弹窗修改按钮文字 saveBtn: true, // 单击表格上方新增按钮,表格弹窗页面的保存按钮是否显示 saveBtnText: '保存', // 表格弹窗保存按钮文字 cancelBtn: true, // 单击新增或者修改按钮,表格弹窗取消按钮是否显示 cancelBtnText: '取消', // // 表格弹窗取消按钮文字 refreshBtn: true, //表格顶部右侧刷新数据按钮 columnBtn: true, //表格顶部右侧表格列操作按钮 searchShowBtn: true, //表格顶部右侧表格搜索显隐按钮 gridBtn: true, // 表格顶部右侧卡片模式切换按钮 excelBtn: false, //表格顶部右侧表格导出按钮 printBtn: false, // 表格顶部右侧表格打印按钮 filterBtn: false, //表格顶部右侧表格自定义过滤按钮 dialogWidth: 60%, // 表格弹窗宽度(新增、修改、查看) }
四、option.column配置项参数
表格列配置或者搜索栏中列(非插槽)的配置
column:[{ label: '字段显示名称', // 该列表头显示的标题 labelTip: "字段说明", // 字段说明,放入搜索栏后会在字段前鼠标移到该字段时显示tip说明 prop: "name", // 列属性名称key,用于唯一标识 width: "150", //列宽 sortable: false, // 对应列是否可以排序,如果设置为 'custom',则代表需要自定义排序,需要监听 Table 的 sort-change 事件 fixed:false, //列是否固定在左侧或者右侧,true 表示固定在左侧(true/left/right) hide:true, // 是否隐藏列,注意和display(弹出框是否显示列)的区别 overHidden: true, // 超出用省略号显示 type: "radio", // 字段类型,如单选、复选等 dataType: "number", // 字段数据类型 value: 1, // 对应value值 dicData: [{ // 字典 label: '名称1', value: 1 },{ label: '名称2', value: 2 }], slot: true, // 自定义插槽,在html里可以通过编写template #字段名称来自定义插槽 search: true, // 是否为搜索项,将该字段添加到搜索栏 searchValue: '初始值', // 搜索项初始化值 searchPlaceholder: '请输入 XXX', // 搜索项辅助文字 searchOrder: 1, // 搜索项位置排序,序号越大越靠前 dialogWidth: 650, // 弹出表单(新增、修改、查看)的宽度 labelWidth: 100, // 弹出表单(新增、修改、查看)字段名称label的宽度 display: true, // 弹出表单(新增、修改、查看)是否显示该列,注意区分和hide的区别 addDisplay: false, // 表单新增时项是否显示 editDisplay: false, // 表单编辑时项是否显示 viewDisplay: false, // 表单查看时项是否显示 disabled: true, // 弹出表单(新增、修改、查看)是否禁止 addDisabled: false, //表单新增时项是否禁止 editDisabled: false, // 表单编辑时项是否禁止 viewDisabled: false, // 表单查看时项是否禁止 formatter: (row, value) => { // 用来格式化列内容 return dayjs(value).format('YYYY-MM-DD'); // // 格式化日期示例: YYYY-MM-DD }, rules: [{ // 表单校验规则 required: true, // 是否必填项 message: "请输入推送名称", // 当验证不通过时显示的提示信息 trigger: "blur" // blur: 在字段失去焦点时触发验证;change: 在字段内容发生变化时触发验证 }] }]
标签:常用,false,表格,crud,表单,搜索,按钮,true,avue From: https://www.cnblogs.com/kk8085/p/18457983