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的回调方法,也可以使用字符串为所有单元格设置一个固定的classNamefunction-({row,column,rowIndex,columnIndex})=>{}
cell-style单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有单元格设置一样的 Style。function-({row,column,rowIndex,columnIndex})=>{}
header-cell-class-name表头单元格的className的回调方法,也可以使用字符串为所有表头单元格设置一个固定的classNamefunction-({ column, columnIndex, row, rowIndex})=>{}
header-row-class-name表头行的 className 的回调方法,也可以使用字符串为所有表头行设置一个固定的 className。function-({rowIndex})=>{}
header-row-style表头行的 style 的回调方法,也可以使用一个固定的 Object 为所有表头行设置一样的 Style。function-({rowIndex})=>{}
header-cell-style表头单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。function-({ column, columnIndex, row, rowIndex})=>{}
row-class-name行的className的回调方法,也可以使用字符串为所有行设置一个固定的classNamefunction-({row,rowIndex})=>{}
row-style行的 style 的回调方法,也可以使用一个固定的 Object 为所有行设置一样的 Style。function-({row,rowIndex})=>{}
span-method合并行或列的计算方法function-({row,column,rowIndex,columnIndex})=>{}
summary-method自定义的合计计算方法function-({columns,data})=>{}
table-loading表格等待框的控制boolean--
upload-beforeupload组件上传前的回调,done用于继续图片上传,loading用于中断操作function-(file,done,loading)=>{}
upload-afterupload组件上传后的回调,done用于结束操作,loading用于中断操作function-(res,done)=>{}
upload-deleteupload组件删除文件之前的钩子,参数为上传的文件和文件列表,若返回 false 或者返回 Promise 且被 reject,则停止删除function-(file,column)=>{}
upload-previewupload组件查看回调function-(file,column,done)=>{}
upload-errorupload组件上传失败错误回调function-(error,column)=>{}
upload-exceedupload组件上传超过长度限制回调function-(limit,files,fileList,column)=>{}
upload-size 3.4.4upload组件上传超过大小限制回调function-(fileSize,files,fileList,column)=>{}

Page

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

Option

参数说明类型可选值默认值
size组件的尺寸numbermedium/small/minismall
column表单列配置参考Column相关配置array--
height表格的高度,默认为自动高度。如果设置为auto,会自适应窗口高度,配合calcHeight参数去调节范围string--
maxHeight表格的最大高度array--
stripe是否为斑马纹boolean-false
index是否有序号boolean-false
indexWidth序号列宽度number-50
indexFixed序号列是否冻结列 ,true 表示固定在左侧boolean/stringtrue/left/righttrue
indexClassName序号列的单元格自定义类名String--
indexLabelClassName序号列标题的自定义类名String--
menu是否有操作栏boolean-true
menuWidth操作栏宽度number-220
menuTitle操作栏标题string-标题
menuFixed操作栏列冻结列 ,true 表示固定在左侧boolean/stringtrue/left/righttrue
menuClassName操作栏列的单元格自定义类名String--
menuLabelClassName操作栏列标题的自定义类名String--
menuType操作栏按钮样式stringbutton/icon/text/menutext
menuHeaderAlign操作栏表头的对齐方式stringleft/center/rightcenter
menuAlign操作栏按钮的对齐方式stringleft/center/rightcenter
selection是否有选择框boolean-false
selectableselection为true,控制返回值用来决定这一行的 CheckBox 是否可以勾选function--
selectionWidth选择框列宽度number-50
selectionFixed选择框列是否冻结列 ,true 表示固定在左侧boolean/stringtrue/left/righttrue
selectionClassName选择框列的单元格自定义类名String--
selectionLabelClassName选择框列标题的自定义类名String--
expand是否有展开表格boolean-false
expandWidth展开列宽度number-50
expandFixed展开列是否冻结列 ,true 表示固定在左侧boolean/stringtrue/left/righttrue
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指定默认排序的顺序objectascending/ descendingascending
showSummary是否在表尾显示合计行boolean-false
showOverflowTooltip全局当内容过长被隐藏时显示 tooltip详请参考tooltip-optionsboolean/object-false
tooltipEffect溢出的 tooltip 的 effectstringdark/lightdark
tooltipOptions溢出 tooltip 的选项,参见 tooltip 组件object-left
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
gridBtn 3.4.0卡片模式切换按钮boolean-true
gridSpan 3.4.0卡片模式格栅number-8
gridBackgroundImage 3.4.0卡片模式背景图片string--
gridBackground 3.4.0卡片模式背景颜色string/function--
addTitle表格新增弹窗标题string-新增
editTitle表格修改弹窗标题boolean-修改
viewTitle表格查看弹窗标题boolean-查看
dialogDrag表格弹窗是否可以拖拽boolean-false
dialogFullscreen表格弹窗是否为全屏boolean-false
dialogCustomClass表格弹窗自定义classstring--
dialogEscape表格弹窗是否可以通过按下ESC关闭boolean-true
dialogClickModal表格弹窗是否可以通过点击modal关闭boolean-false
dialogCloseBtn表格弹窗是否显示关闭按钮boolean-true
dialogModal表格弹窗是否需要遮罩层boolean-true
dialogMenuPosition表格弹窗框按钮的位置stringleft/center/rightright
dialogTop表格弹窗顶部的距离number-25
dialogType表格弹窗方式stringdialog/drawerdialog
dialogDirection表格弹窗打开方向stringrtl/ltr/ttb/tbbrtl
dialogWidth表格弹窗宽度string-60%
searchShow表格搜索首次是否展示boolean-true
searchIcon表格搜索半收缩按钮boolean-false
searchIndex表格搜索半收缩个数number-2
searchMenuPosition表格搜索按钮位置left/center/right-center
searchPlaceholder搜索项辅助文字string-
searchSpan搜索项框栅列number8
searchGutter搜索项框间距number-
searchLabelWidth搜索项标题宽度number80
searchLabelPosition搜索项标题位置stringleft/right/topleft

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选项标签为选项对象的某个属性值stringlabel
value选项的值为选项对象的某个属性值stringvalue
children选项的子选项为选项对象的某个属性值stringchildren
disabled选项的禁用为选项对象的某个属性值stringdisabled
res选项返回结构的层级(例如data.data)string-

Column-共用属性

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

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清空搜索回调方法-
dateChangedateBtn为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

Slot

名称说明
'prop'
'prop'-header列头部
'prop'-search列搜索
'prop'-form弹窗表单
'prop'-label弹窗表单的标题
'prop'-error弹窗表单错误提示
search表格搜索
searchMenu表格搜索菜单
header表格头部
body 3.4.3表格中部
page表格分页
menu-left表格菜单左部分
menu-right表格菜单右部分
menu表格菜单
menu-before 3.4.3表格菜单前
menu-btn表格合并菜单
menu-btn-before 3.4.3表格合并菜单前
menu-form表格弹窗菜单
menu-form-before 3.4.3表格弹窗菜单前
Last Updated:
Contributors: smallwei
您正在浏览基于Avue 3.x文档; 点击这里 查看Avue 2.x 的文档