avue-crud常用配置说明

avue-crud 是一个基于 Vue.js 的开源组件库，用于快速构建表单、表格和数据管理的前端界面。它简化了常见的 CRUD（创建、读取、更新、删除）操作的开发过程，特别适用于管理系统或后台管理平台。

它是一个基于Element-plus低代码前端框架，它使用JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。

主要特点

1. 快速生成表单和表格：通过简单的配置文件，你可以快速生成带有验证规则的表单，以及带分页、搜索、筛选等功能的表格。
2. 内置丰富组件：avue-crud 内置了大量的表单组件和表格功能，如输入框、下拉框、日期选择器、开关、文件上传、图片上传等，支持多种类型的数据展示。
3. 自定义插槽：支持自定义插槽，开发者可以根据业务需求自定义表单项或表格列的展示方式，灵活性高。
4. 响应式布局：支持响应式设计，能够在不同设备上正常显示，如桌面端和移动端。
5. 集成操作按钮：集成了常见的操作按钮（如新增、删除、编辑、查看），简化了常用的增删改查操作。
6. 与第三方框架集成：可以与 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: 在字段内容发生变化时触发验证
    }]
}]