Crud属性文档

//3.4.1+支持
//crud组件全局配置
app.use(Avue,{
  crudOption:{}
})

//可以获取到el-table的内置ref对象
this.$refs.crud.$refs.table

Crud

参数	说明	类型	可选值	默认值
modelValue/v-model	绑定值	object	-	-
data	显示的数据	array	-	-
option	表单配置项参考Option配置	object	-	-
before-open	打开前的回调，会暂停Dialog的打开，done用于关闭Dialog,type为当前窗口的类型	function	-	(done,type)=>{}
before-close	关闭前的回调，会暂停Dialog的关闭，done用于关闭Dialog,type为当前窗口的类型	function	-	(done,type)=>{}
permission	表格多个按钮权限控制，采用函数方式可以精确到行控制	-	-	-
v-model:search	搜索变量	object	-	-
v-model:page	分页变量参考Page参数	object	-	-
cell-class-name	单元格的className的回调方法，也可以使用字符串为所有单元格设置一个固定的className	function	-	({row,column,rowIndex,columnIndex})=>{}
header-cell-class-name	表头单元格的className的回调方法，也可以使用字符串为所有表头单元格设置一个固定的className	function	-	({row,column,rowIndex,columnIndex})=>{}
row-class-name	行的className的回调方法，也可以使用字符串为所有行设置一个固定的className	function	-	({row,rowIndex})=>{}
span-method	合并行或列的计算方法	function	-	({row,column,rowIndex,columnIndex})=>{}
summary-method	自定义的合计计算方法	function	-	({columns,data})=>{}
table-loading	表格等待框的控制	boolean	-	-
upload-before	upload组件上传前的回调,done用于继续图片上传，loading用于中断操作	function	-	(file,done,loading)=>{}
upload-after	upload组件上传后的回调,done用于结束操作，loading用于中断操作	function	-	(res,done)=>{}
upload-delete	upload组件删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除	function	-	(file,column)=>{}
upload-preview	upload组件查看回调	function	-	(file,column,done)=>{}
upload-error	upload组件上传失败错误回调	function	-	(error,column)=>{}
upload-exceed	upload组件上传超过长度限制回调	function	-	(limit,files,fileList,column)=>{}

Page

参数	说明	类型	可选值	默认值
currentPage	当前页数	number	-	1
pageSize	每页显示条目个数	number	-	20
total	总条目数	number	-	0
pagerCount	页码按钮的数量，当总页数超过该值时会折叠	number	-	7
background	是否为分页按钮添加背景色	boolean	-	true
layout	组件布局，子组件名用逗号分隔	string	sizes, prev, pager, next, jumper, ->, total, slot	'prev, pager, next, jumper, ->, total'
pageSizes	每页显示个数选择器的选项设置	number[]	-	[10, 20, 30, 40, 50, 100]

Option

参数	说明	类型	可选值	默认值
size	组件的尺寸	number	medium/small/mini	small
column	表单列配置参考Column相关配置	array	-	-
height	表格的高度，默认为自动高度。如果设置为auto，会自适应窗口高度，配合calcHeight参数去调节范围	string	-	-
maxHeight	表格的最大高度	array	-	-
stripe	是否为斑马纹	boolean	-	false
index	是否有序号	boolean	-	false
indexWidth	序号列宽度	number	-	50
indexFixed	序号列是否冻结列 ，true 表示固定在左侧	boolean/string	true/left/right	true
indexClassName	序号列的单元格自定义类名	String	-	-
indexLabelClassName	序号列标题的自定义类名	String	-	-
menu	是否有操作栏	boolean	-	true
menuWidth	操作栏宽度	number	-	220
menuTitle	操作栏标题	string	-	标题
menuFixed	操作栏列冻结列 ，true 表示固定在左侧	boolean/string	true/left/right	true
menuClassName	操作栏列的单元格自定义类名	String	-	-
menuLabelClassName	操作栏列标题的自定义类名	String	-	-
menuType	操作栏按钮样式	string	button/icon/text/menu	text
menuHeaderAlign	操作栏表头的对齐方式	string	left/center/right	center
menuAlign	操作栏按钮的对齐方式	string	left/center/right	center
selection	是否有选择框	boolean	-	false
selectable	selection为true，控制返回值用来决定这一行的 CheckBox 是否可以勾选	function	-	-
selectionWidth	选择框列宽度	number	-	50
selectionFixed	选择框列是否冻结列 ，true 表示固定在左侧	boolean/string	true/left/right	true
selectionClassName	选择框列的单元格自定义类名	String	-	-
selectionLabelClassName	选择框列标题的自定义类名	String	-	-
expand	是否有展开表格	boolean	-	false
expandWidth	展开列宽度	number	-	50
expandFixed	展开列是否冻结列 ，true 表示固定在左侧	boolean/string	true/left/right	true
expandClassName	展开列的单元格自定义类名	String	-	-
expandLabelClassName	展开列标题的自定义类名	String	-	-
border	是否带有纵向边框	boolean	-	false
reserveSelection	在数据更新之后保留之前选中的数据（需指定 rowKey）	boolean	-	false
fit	列的宽度是否自撑开	boolean	-	true
showHeader	是否显示表头	boolean	-	true
header	隐藏表格头部操作	boolean	-	false
highlightCurrentRow	是否要高亮当前行	boolean	-	false
rowKey	行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。	string	-	id
rowParentKey	行数据的 Key，的父类Key用于局部刷新树形表格。	string	-	parentId
emptyText	空数据时显示的文本内容	string	-	暂无数据
defaultExpandAll	是否默认展开所有行，当前表格包含展开行存在或者为树形表格时有效	boolean	-	false
expandRowKeys	可以通过该属性设置 Table 目前的展开行，需要设置 rowKey 属性才能使用，该属性为展开行的 keys 数组。	array	-	false
defaultSort	默认的排序列的 prop 和顺序。它的prop属性指定默认的排序的列，order指定默认排序的顺序	object	ascending/ descending	ascending
showSummary	是否在表尾显示合计行	boolean	-	false
lazy	是否懒加载子节点数据,会调用tree-load方法回调	boolean	-	false
title	表格标题	string	-	-
addBtn	表格新增按钮	boolean	-	true
addBtnText	表格新增按钮文案	string	-	新增
addBtnIcon	表格新增按钮图标	string	-	-
editBtn	表格修改按钮	boolean	-	true
editBtnText	表格修改按钮文案	string	-	修改
editBtnIcon	表格修改按钮图标	string	-	-
delBtn	表格删除按钮	boolean	-	true
delBtnText	表格删除按钮文案	string	-	删除
delBtnIcon	表格删除按钮图标	string	-	-
viewBtn	表格查看按钮	boolean	-	false
viewBtnText	表格查看按钮文案	string	-	查看
viewBtnIcon	表格查看按钮图标	string	-	-
updateBtn	表格弹窗修改按钮	boolean	-	true
updateBtnText	表格弹窗修改按钮文案	string	-	修改
updateBtnIcon	表格弹窗修改按钮图标	string	-	-
saveBtn	表格弹窗保存按钮	boolean	-	true
saveBtnText	表格弹窗保存按钮文案	string	-	保存
saveBtnIcon	表格弹窗保存按钮图标	string	-	-
cancelBtn	表格弹窗取消按钮	boolean	-	true
cancelBtnText	表格弹窗取消按钮文案	string	-	取消
cancelBtnIcon	表格弹窗取消按钮图标	string	-	-
searchBtn	表格搜索按钮	boolean	-	true
searchBtnText	表格搜索按钮文案	string	-	搜索
searchBtnIcon	表格搜索按钮图标	string	-	-
emptyBtn	表格清空按钮	boolean	-	true
emptyBtnText	表格清空按钮文案	string	-	清空
emptyBtnIcon	表格清空按钮图标	string	-	-
printBtn	表格打印按钮	boolean	-	false
excelBtn	表格导出按钮	boolean	-	false
filterBtn	表格自定义过滤按钮	boolean	-	false
refreshBtn	表格刷新数据按钮	boolean	-	true
columnBtn	表格列操作按钮	boolean	-	true
searchShowBtn	表格搜索显隐按钮	boolean	-	true
refreshBtn	表格刷新数据按钮	boolean	-	true
copyBtn	表格复制数据按钮	boolean	-	false
addTitle	表格新增弹窗标题	string	-	新增
editTitle	表格修改弹窗标题	boolean	-	修改
viewTitle	表格查看弹窗标题	boolean	-	查看
dialogDrag	表格弹窗是否可以拖拽	boolean	-	false
dialogFullscreen	表格弹窗是否为全屏	boolean	-	false
dialogCustomClass	表格弹窗自定义class	string	-	-
dialogEscape	表格弹窗是否可以通过按下ESC关闭	boolean	-	true
dialogClickModal	表格弹窗是否可以通过点击modal关闭	boolean	-	false
dialogCloseBtn	表格弹窗是否显示关闭按钮	boolean	-	true
dialogModal	表格弹窗是否需要遮罩层	boolean	-	true
dialogMenuPosition	表格弹窗框按钮的位置	string	left/center/right	right
dialogTop	表格弹窗顶部的距离	number	-	25
dialogType	表格弹窗方式	string	dialog/drawer	dialog
dialogDirection	表格弹窗打开方向	string	rtl/ltr/ttb/tbb	rtl
dialogWidth	表格弹窗宽度	string	-	60%
searchShow	表格搜索首次是否展示	boolean	-	true
searchIcon	表格搜索半收缩按钮	boolean	-	false
searchIndex	表格搜索半收缩个数	number	-	2
searchMenuPosition	表格搜索按钮位置	left/center/right	-	center
searchPlaceholder	搜索项辅助文字	string	—	-
searchSpan	搜索项框栅列	number	—	8
searchGutter	搜索项框间距	number	—	-
searchLabelWidth	搜索项标题宽度	number	—	80
searchLabelPosition	搜索项标题位置	string	left/right/top	left

Column-字典属性

参数	说明	类型	可选值	默认值
props	数据字典属性的配置对象，具体参考Props参考配置	object	—	—
dicData	数据字典值	array	—	—
dicUrl	数据字典接口url地址	string	—	—
dicQuery	数据字典接口url携带请求参数	object	—	—
dicHeaders	数据字典接口url携带头部参数	object	—	—
dicFormatter	数据字典接口url返回数据格式化方法	function	—	(res)=>{return res}
dicMethod	数据字典接口请求方式	string	—	—

Column-Props

参数	说明	类型	可选值	默认值
label	选项标签为选项对象的某个属性值	string	—	label
value	选项的值为选项对象的某个属性值	string	—	value
children	选项的子选项为选项对象的某个属性值	string	—	children
disabled	选项的禁用为选项对象的某个属性值	string	—	disabled
res	选项返回结构的层级(例如data.data)	string	—	-

Column-共用属性

参数	说明	类型	可选值	默认值
label	列标题	string	—	—
prop	列标题的内容属性名称	string	—	-
width	对应列的宽度	string	—	-
bind	深结构数据绑定值	string	—	-
minWidth	对应列的最小宽度，与 width 的区别是 width 是固定的，minWidth 会把剩余宽度按比例分配给设置了 minWidth 的列	string	—	-
fixed	列是否固定在左侧或者右侧，true 表示固定在左侧	boolean/string	true/left/right	-
className	列的单元格自定义类名	String	-	-
labelClassName	列标题的自定义类名	String	-	-
sortable	对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件	string	true, false, 'custom'	-
formatter	用来格式化列内容	function	-	(row, value, row, column)
overHidden	当内容过长被隐藏时显示 tooltip	boolean	-	false
align	对齐方式	string	left/center/right	left
headerAlign	表头对齐方式，若不设置该项，则使用表格的对齐方式	string	left/center/right	left
filters	数据过滤的选项。	boolean	-	false
search	是否为搜索项	boolean	—	false
searchValue	搜索项初始化值	string	—	-
searchPlaceholder	搜索项辅助文字	string	—	-
searchSpan	搜索项框栅列	number	—	8
searchOrder	搜索项位置排序，序号越大越靠前	number	—	-
searchGutter	搜索项框间距	number	—	-
searchRange	搜索项为范围搜索	boolean	—	false
searchType	搜索项的类型	string	—	-
searchLabelWidth	搜索项标题宽度	number	—	80
searchClearable	搜索项清除	boolean	—	false
searchMultiple	搜索项是否多选	boolean	—	false
searchTags	搜索项将选中值按文字的形式展示	boolean	—	false
searchLabelPosition	搜索项标题位置	string	left/right/top	left
display	弹出表单是否显示	boolean	-	true
disabled	弹出表单是否禁止	boolean	-	false
addDisabled	表单新增时项是否禁止	boolean	—	false
editDisabled	表单编辑时项是否禁止	boolean	—	false
viewDisabled	表单查看时项是否禁止	boolean	—	false
addDisplay	表单新增时项是否显示	boolean	—	true
editDisplay	表单编辑时项是否显示	boolean	—	true
viewDisplay	表单查看时项是否显示	boolean	—	true
resizable	对应列是否可以通过拖动改变宽度（需要在option中border属性为真）	boolean	—	true

Events

事件名称	说明	参数
row-save	新增数据后点击确定触发该事件	row,done,loading
row-update	更新数据后确定触发该事件	row,index,done,loading
row-del	行数据删除时触发该事件	row,index
refresh-change	点击刷新按钮触发该事件(由于page分页信息和search搜索信息，可以直接通过this.page和this.search拿到)	-
search-change	点击搜索后触发该事件(由于page分页信息和search搜索信息，可以直接通过this.page和this.search拿到)	form,done
search-reset	清空搜索回调方法	-
dateChange	dateBtn为true时的选择日期回调方法	date
tree-load	加载子节点数据的函数，lazy 为 true 时生效，函数第二个参数包含了节点的层级信息	row, treeNode, resolve)
select	当用户手动勾选数据行的 Checkbox 时触发的事件	selection, row
select-all	当用户手动勾选全选 Checkbox 时触发的事件	selection
selection-change	当选择项发生变化时会触发该事件	selection
cell-mouse-enter	当单元格 hover 进入时会触发该事件	row, column, cell, event
cell-mouse-leave	当单元格 hover 退出时会触发该事件	ow, column, cell, event
cell-click	当某个单元格被点击时会触发该事件	row, column, cell, event
cell-dblclick	当某个单元格被双击击时会触发该事件	row, column, cell, event
row-click	当某一行被点击时会触发该事件	row, column, event
row-contextmenu	当某一行被鼠标右键点击时会触发该事件	row, column, event
row-dblclick	当某一行被双击时会触发该事件	row, column, event
header-click	当某一列的表头被点击时会触发该事件	column, event
header-contextmenu	当某一列的表头被鼠标右键点击时触发该事件	column, event
sort-change	当表格的排序条件发生变化的时候会触发该事件	{ column, prop, order }
filter-change	当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。	filters
current-row-change	当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlightCurrentRow 属性	currentRow, oldCurrentRow
header-dragend	当拖动表头改变了列的宽度的时候会触发该事件	newWidth, oldWidth, column, event
expand-change	当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded）	row, (expandedRows

Methods

事件名称	说明	参数
rowAdd	打开表单新增窗口	-
rowEdit	打开表单编辑窗口	row,index
rowView	打开表单查看窗口	row,index
updateDic	更新指定字典	prop,dic
dicInit	重新加载全部字典	—
getPropRef	获取prop的ref对象	prop
validate	对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise	(valid,done,msg)
validateField	对部分表单字段进行校验的方法	Function(props: array
resetFields	对整个表单进行重置，将所有字段值重置为初始值并移除校验结果	—
clearValidate	移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果	Function(props: array
clearSelection	用于多选表格，清空用户的选择	—
toggleSelection	用于多选表格，传递数组进去，会勾选数组中的对象，如果已经勾选则会取消勾选	array
toggleAllSelection	用于多选表格，切换所有行的选中状态	-
toggleRowExpansion	用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开）	row, expanded
setCurrentRow	用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。	row
clearSort	用于清空排序条件，数据会恢复成未排序的状态	—
clearFilter	不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态，也可传入由columnKey组成的数组以清除指定列的过滤条件	columnKey
doLayout	对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法	—
refreshTable	进行重新初始化渲染	—
sort	手动对 Table 进行排序。参数prop属性指定排序列，order指定排序顺序。	prop: string, order: string