首页 > 其他分享 >avue-crud常用配置说明

avue-crud常用配置说明

时间:2024-10-11 11:02:15浏览次数:9  
标签:常用 false 表格 crud 表单 搜索 按钮 true avue

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: 在字段内容发生变化时触发验证
    }]
}]

 

 

 

 

标签:常用,false,表格,crud,表单,搜索,按钮,true,avue
From: https://www.cnblogs.com/kk8085/p/18457983

相关文章

  • Oracle中alter table的常用用法
    首发微信公众号:SQL数据库运维原文链接:https://mp.weixin.qq.com/s?__biz=MzI1NTQyNzg3MQ==&mid=2247486440&idx=1&sn=b8a50ce5e993b4ab196ddda705077d95&chksm=ea375f98dd40d68ea079d90ac6084078e8ec9e1a4b1f4cc266fb97976dc2c72f452a61f55850&token=1175589249&la......
  • Linux常用命令
    ifconfig显示网络设备信息,查看对应的ip地址等history查看历史操作指令last列出目前与过去登入系统的用户相关信息相关指令:lastbwhoami查看当前登录的用户top显示当前系统进程的相关信息,包括进程ID、内存占用率、CPU占用率等vim编辑器命令模式......
  • 5、HTML 常用标签 - 第三集
    通过学习,我们的人生被赋予了更多的选择,创造了更多的可能性。文章目录前言1.表单域form1.1标签描述1.2示例代码1.3运行截图2.表单元素input2.1常用“输入框”类型2.2常用“选择框”类型2.3常用“按钮”类型专栏附录前言在HTML中,一个完整的表单通常......
  • Web安全常用工具 (持续更新)
    前言本文虽然是讲web相关工具,但在在安全领域,没有人是先精通工具,再上手做事的。鉴于web领域繁杂戎多的知识点(工具是学不完的,哭),如果你在本文的学习过程中遇到没有学过的知识点,可以先跳过去,等你学到这里要用到工具时,再从实际例子中学习、利用工具。(本文工具基本都可以在CTFHub中......
  • 缓存常用的三种读写策略
    在现代软件系统中,缓存的使用至关重要,它可以极大地提高系统的性能和响应速度。本文将详细介绍缓存常用的三种读写策略:CacheAsidePattern(旁路缓存模式)、Read/WriteThroughPattern(读写穿透)、WriteBehindPattern(异步缓存写入)。一、CacheAsidePattern(旁路缓存模式)Cac......
  • C++常用设计模式详解
    前言:本文详细解释几种常用的C++设计模式,都是平时项目中用的比较多的。本文针对每种设计模式都给出了示例,让你跟着代码彻底搞懂设计模式。Tips:如果是准备面试,不需要知道所有的设计模式,要深入理解下面几种常用即可,因为面试官会先问你了解哪些设计模式,然后从你了解的里面挑一......
  • BigDecimal 常用方法
    文章目录BigDecimal常用方法1.初始化BigDecimal2.创建BigDecimal对象3.BigDecimal类中定义好的常量4.BigDecimal值之间的转换5.取当前值的相反数、绝对值、幂函数、保留数值的精度6.BigDecimal之间的运算:加减乘除方法7.两数相除保留精度BigDecimal常用方法1.初......
  • git常用的分支命令
    克隆一个远程仓库:gitclone远程地址显示分支:gitbranch可选标志标志-r:显示远程分支-a:显示所有分支(本地和远程)-v:显示最后一次提交分分支创建一个分支:gitbranch分支名字创建分支并且切换该分支:gitcheckout-b分支名字切换分支:gitcheckout分支名字删除分支:gi......
  • Linux常用命令1
    1.查看进程ps-ef2.查看hping3的进程ps-ef|grephping33.hping3发包命名hping3目的IP-p目的端口-s源端口-k保持指定的源端口-i包速率uXXX4.查看日志命令tail-f日志名5.抓包命令tcpdump-iens1f2tcpandhost3.3.3.34-nn写入抓包文件tc......
  • 常用的校验方法-正则表达式(推荐)
    转载:https://blog.csdn.net/JaveWong/article/details/1202102101、校验数字的表达式数字:^[0-9]*$n位的数字:^\d{n}$至少n位的数字:^\d{n,}$m-n位的数字:^\d{m,n}$零和非零开头的数字:^(0|[1-9][0-9]*)$非零开头的最多带两位小数的数字:^([1-9][0-9]*)+(.[0-9]{1,2})......