avue-crud常用配置说明
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: 在字段内容发生变化时触发验证
}]
}]
