CRUD API
本页按 Avue 3.9.5 的 CRUD 实现整理。普通表格、卡片模式和虚拟表共用配置入口,但渲染能力不同;虚拟表的边界见 表格虚拟化。
option 用于字段和界面配置,组件 props 用于绑定数据和传入回调,事件由业务代码负责请求与保存。表中的「未设置」表示 Avue 没有覆盖该值,转交底层组件处理。
全局配置
app.use(Avue, {
crudOption: {
border: true,
rowKey: 'id'
},
optionValidate: true
});当前实例的 option 覆盖 crudOption 的同名顶层字段,不会逐列合并。只关闭当前实例的配置校验,应设置 option.optionValidate = false;全局关闭后,实例不会重新开启校验。
Crud 组件属性
| 属性 | 类型 / 默认值 | 说明 |
|---|---|---|
v-model / modelValue | object / {} | 弹窗新增、编辑、查看使用的表单对象,不是列表数组 |
data | array / [] | 当前显示的行数据,需显式传入;CRUD 不会自动按 pageSize 截取 |
option | object / {} | 当前表格配置,需显式传入 |
v-model:search | object / {} | 搜索表单对象;提交给接口的参数由 search-change 返回 |
v-model:page | object / {} | 分页对象,结构见下表 |
table-loading | boolean / false | 列表加载遮罩,请在请求的 finally 中恢复 |
width、height | number / string,默认 null | 优先于 option 中的表格尺寸;虚拟表必须传数字 |
permission | object / function,默认 {} | 如 { addBtn: false };函数签名 (key, row, index) => boolean,头部按钮没有行参数,未配置的权限默认允许 |
before-open | function | (done, type, loading);type 为 add/edit/view。调用 done() 继续打开;loading() 先显示弹窗和加载态,随后 done() 结束加载 |
before-close | function | (done, type);调用 done() 才继续关闭 |
span-method | function | ({ row, column, rowIndex, columnIndex }),返回 [rowspan, colspan] 或对应对象 |
summary-method | function | ({ columns, data }) => array,自定义合计行;配合 option.showSummary |
row-class-name | string / function | ({ row, rowIndex }) => string,行样式类 |
cell-class-name | string / function | ({ row, column, rowIndex, columnIndex }) => string,单元格样式类 |
row-style、cell-style | object / function | 行 / 单元格内联样式;函数入参与对应 class 回调一致 |
header-row-class-name、header-row-style | string / object / function | 表头行样式;函数接收 { rowIndex } |
header-cell-class-name、header-cell-style | string / object / function | 表头单元格样式;函数接收 { row, column, rowIndex, columnIndex } |
上传回调作为组件 props 传入,列上的同名配置可覆盖它们:
| 回调 | 参数及用途 |
|---|---|
upload-before | (file, done, loading, column),上传前,done 继续,loading 中止等待 |
upload-after | (res, done, loading, column),上传成功后的处理 |
upload-delete | (file, column),返回 false 或拒绝的 Promise 可阻止删除 |
upload-preview | (file, column, done),自定义预览,done 继续默认预览 |
upload-error | (error, column),上传错误 |
upload-exceed | (limit, files, fileList, column),超出数量 |
upload-sized | (fileSize, files, fileList, column),超出大小;配置名为 uploadSized,不是 uploadSize |
Page 分页对象
| 字段 | 类型 | 默认值 | 说明 |
|---|---|---|---|
currentPage | number | 1 | 当前页,从 1 开始 |
pageSize | number | 10 | 每页条数 |
total | number | 0 | 总记录数,不是总页数;为 0 时分页区域隐藏 |
pageSizes | number[] | [10, 20, 30, 40, 50, 100] | 可选每页条数 |
pagerCount | number | 7 | 可见页码按钮数 |
background | boolean | true | 分页按钮背景 |
layout | string | 'total, sizes, prev, pager, next, jumper' | 桌面默认布局;窄屏默认不含 jumper,显式配置优先 |
single | boolean | false | 只有一页时隐藏分页器 |
disabled | boolean | 未设置 | 禁用分页器 |
on-load(page) 在初次创建、用户改变页码和每页条数时触发;改变条数会先回到第 1 页。只修改 page.currentPage 不会代替业务请求。不要在 on-load、current-change、size-change 中重复请求同一份数据。完整示例见 分页与搜索。
Option 表格配置
数据、布局和展示
| 配置 | 类型 / 默认值 | 说明 |
|---|---|---|
column | array / object | 列配置;数组用于显式顺序,对象形式以键作为默认 prop |
optionValidate | boolean / true | 当前配置校验开关,受全局开关约束 |
rowKey | string / 'id' | 稳定且唯一的主键;编辑、删除、选择、树形数据均依赖它 |
rowParentKey | string / 'parentId' | 树形数据新增子节点、局部更新所用的父节点字段 |
size | string / 'default' | large/default/small;依次继承全局 tableSize、size |
height | number / string | 固定高度,或 'auto' 按窗口计算高度 |
calcHeight | number / 0 | 自动高度的额外扣减量,与全局 calcHeight 相加 |
width | number / string,默认 '100%' | 普通表格宽度;虚拟表使用组件的数字 :width |
maxHeight | number / string | 最大高度;自动高度模式使用计算结果 |
border、stripe | boolean / 未设置 | 纵向边框、斑马纹 |
fit、showHeader | boolean / 未设置 | 列宽自撑、是否显示表头,沿用底层表格默认值 |
header | boolean / true | 是否显示表格上方工具栏,与 showHeader 不同 |
menuLeft、menuRight | boolean / true | 左 / 右工具栏区域 |
card | boolean / false | 搜索、表格、分页容器使用卡片阴影 |
title、titleSize、titleStyle | string / string / object | 标题内容、标题标签(默认 h2)和样式 |
align、headerAlign | string | 普通列内容 / 表头对齐方式:left/center/right;列配置优先 |
emptyText | string | 空列表文字,默认使用当前语言的「暂无数据」 |
highlightCurrentRow | boolean | 高亮当前行,与多选相互独立 |
defaultSort | object | { prop, order: 'ascending' / 'descending' },没有默认排序列 |
showOverflowTooltip、overHidden | boolean / object | 全局溢出提示配置 |
tooltipEffect、tooltipOptions、tooltipFormatter | string / object / function | 透传表格的 Tooltip 配置;tooltipOptions 不是方向字符串 |
scrollbarAlwaysOn、flexible、tableLayout | boolean / boolean / string | 透传底层表格;布局可设 fixed/auto |
allowDragLastColumn、appendFilterPanelTo | boolean / string | 透传列宽调整、筛选浮层挂载配置,需底层 Element Plus 支持 |
page | boolean / true | 是否显示分页区域,仍需 page.total !== 0 |
showSummary、sumColumnList | boolean / array | 合计开关与规则,规则为 { name, type: 'sum/count/avg', label, decimals },精度默认 2 |
loadingText、loadingSpinner、loadingSvg、loadingBackground | string | 列表及弹窗加载态的文字、图标和背景 |
filterDic | boolean / false | 为 true 时,普通列展示字典标签时不额外写入行的 $prop 标签字段 |
序号、选择、展开与树
| 配置 | 类型 / 默认值 | 说明 |
|---|---|---|
index、indexLabel | boolean / string,默认 false / '#' | 序号开关与标题,序号包含分页偏移 |
indexWidth、indexFixed | number / boolean / string,默认 50 / 'left' | 序号宽度、固定位置 |
selection、selectionWidth、selectionFixed | 默认 false / 50 / 'left' | 多选列开关、宽度、固定位置 |
reserveSelection | boolean / false | 按稳定 rowKey 保留选择,卡片跨页示例见 卡片模式 |
selectable | function | (row, index) => boolean,控制用户能否勾选 |
tip | boolean / true | 多选时显示已选择数量和清空操作 |
indeterminate | boolean / false | 树表半选样式,配合底层树表选择能力 |
expand、expandWidth、expandFixed | 默认 false / 60 / 'left' | 展开详情列配置;通过 expand 插槽填内容 |
indexClassName、selectionClassName、expandClassName | string | 对应辅助列的单元格类名 |
indexLabelClassName、selectionLabelClassName、expandLabelClassName | string | 对应辅助列的表头类名 |
tree | boolean | 显式声明树表;普通 children 数据可自动识别,自定义子字段时建议显式设置 |
treeProps | object | children、hasChildren 默认字段及底层树表参数,如 checkStrictly |
lazy | boolean / false | 树节点懒加载,配合 tree-load 和 hasChildren |
defaultExpandAll | boolean | 默认展开所有行 |
expandRowKeys | array | 控制展开的行主键集合,需要 rowKey |
工具栏和操作按钮
| 配置 | 类型 / 默认值 | 说明 |
|---|---|---|
menu、menuTitle | boolean / string,默认 true / 当前语言「操作」 | 行操作列 |
menuWidth、menuXsWidth | number / 220、100 | 桌面 / 窄屏操作列宽 |
menuFixed | boolean / string,默认 'right' | 操作列固定位置 |
menuAlign、menuHeaderAlign | string / 'center' | 操作列内容和标题对齐 |
menuClassName、menuLabelClassName | string | 操作列单元格和表头类名 |
menuType | string / 'text' | button/text/icon/menu,全局 menuType 可覆盖默认值 |
menuBtnTitle | string | menuType: 'menu' 的下拉按钮文字 |
addBtn、editBtn、delBtn | boolean / true | 新增、编辑、删除 |
viewBtn、copyBtn、addRowBtn、cellBtn | boolean / false | 查看、复制新增、行内新增、行内编辑按钮 |
saveBtn、updateBtn、cancelBtn | boolean / true | 弹窗保存、修改、取消;行编辑也使用保存和取消配置 |
refreshBtn、columnBtn、gridBtn、searchShowBtn | boolean / true | 刷新、列设置、卡片切换、搜索区显隐按钮 |
printBtn、excelBtn、filterBtn、dateBtn | boolean / false | 打印、导出、自定义过滤、日期范围工具 |
addBtnText / addBtnIcon 等 | string | 以上操作按钮的文案和图标,可按按钮名配置 Text / Icon |
addTitle、editTitle、viewTitle | string | 新增、编辑、查看弹窗标题 |
弹窗和搜索
| 配置 | 类型 / 默认值 | 说明 |
|---|---|---|
dialogType | string / 'dialog' | dialog/drawer |
dialogDirection | string | 抽屉方向 rtl/ltr/ttb/btt |
dialogWidth | number / string,桌面默认 '60%' | 窄屏默认全宽;数字按像素处理 |
dialogTop | string | 普通弹窗顶部距离,如 '10vh' |
dialogDrag、dialogFullscreen | boolean / false | 弹窗拖拽、初始全屏 |
dialogAppendToBody | boolean / true | 是否挂载到 body |
dialogClickModal | boolean / false | 点击遮罩关闭 |
dialogEscape、dialogCloseBtn、dialogModal | boolean | ESC 关闭、关闭按钮、遮罩,沿用底层默认值 |
dialogCustomClass、headerClass、bodyClass、footerClass | string | 弹窗及分区类名 |
modalPenetrable | boolean | 透传底层弹窗遮罩穿透配置 |
dialogMenuPosition | string / 'right' | 弹窗按钮对齐:left/center/right |
searchShow、searchShowBtn | boolean / true | 初始显示搜索区、显示搜索切换按钮 |
searchBtn、emptyBtn | boolean | 搜索提交 / 清空按钮,默认显示 |
searchBtnText、emptyBtnText | string | 搜索 / 清空文字 |
searchBtnIcon、emptyBtnIcon | string | 搜索 / 清空图标 |
searchSpan、searchLabelWidth | number / 6、80 | 全局搜索栅格宽度与标题宽度,列配置优先 |
searchGutter、searchSize、searchLabelPosition | number / string / string | 搜索间隔、组件尺寸、标题位置 |
searchIcon | boolean | 半折叠开关,继承全局 searchIcon,默认不开启 |
searchIndex | number / 2 | 半折叠时显示的搜索项数量 |
searchMenuPosition、searchMenuSpan | string / number | 搜索按钮位置默认 center;按钮栅格默认跟随搜索栅格 |
searchEnter、searchMenuBtn | boolean | 对应搜索表单的 Enter 提交、底部按钮区域,具体沿用 Form |
拖拽、卡片和虚拟表
| 配置 | 类型 / 默认值 | 说明 |
|---|---|---|
sortable、rowSort、columnSort | boolean / false | 同时拖拽、只拖行、只拖列;挂载前需加载 Sortable |
grid | boolean / false | 初始使用卡片模式 |
gridSpan、gridXsSpan | number / 8、12 | 桌面 / 窄屏卡片栅格,24 表示整行 |
gridBackground | string / function | 背景或 (row, index) => background |
gridBackgroundImage | string | 卡片背景图地址 |
virtualize | boolean / false | 使用 ElTableV2,需显式传组件的数字 :width / :height |
fixed | boolean | 虚拟表的列布局策略,区别于每一列的 fixed |
expandColumnKey | string | 虚拟树表展开列的 key,对应列 prop |
列状态持久化(3.9.2+)
| 配置 | 类型 / 默认值 | 说明 |
|---|---|---|
columnStateKey | string | 启用持久化的业务唯一 key;兼容别名 columnPersistKey、tableId |
columnState | boolean / true | 还需有 key 才会启用 |
columnStateStorage | string / 'localStorage' | 可使用 sessionStorage |
columnStateAutoSave | boolean / true | 是否在状态变化时保存 |
columnStateLoad | function | (key, option) => state,同步返回状态对象 |
columnStateSave | function | (state, key, reason, option),自定义保存 |
columnStateRemove | function | (key, option),自定义删除 |
保存内容是列顺序及列的 hide/fixed/filters/sortable/width 配置;不包含当前选择的筛选值或升降序结果。详见 列状态示例。
Column 列配置
展示与表单
| 配置 | 类型 / 默认值 | 说明 |
|---|---|---|
prop、label | string | 字段唯一标识、列标题 |
type、value、rules | string / any / array | 表单组件类型、初始值、校验规则,详见 Form 配置 |
children | array | 多级表头的子列配置 |
hide | boolean / false | 在表格中隐藏此列 |
showColumn | boolean / true | 是否在列设置中显示此字段;设 false 也会影响默认导出列 |
width、minWidth | number / string | 固定宽度 / 分配剩余空间时的最小宽度;虚拟列应给数字 width |
fixed | boolean / string | true/left/right;普通列在窄屏中会取消固定 |
resizable | boolean | 是否允许拖动列宽,普通表格需 border: true |
align、headerAlign | string | left/center/right,优先于表格全局值 |
className、labelClassName | string | 单元格 / 表头类名 |
index | number | 显式列顺序,按数值升序排列 |
bind | string | 嵌套取值路径,例如 'user.name' |
formatter | function | (row, value, label, column) => 内容;value 为原始字段值,label 为字典 / 日期格式化后的值 |
html | boolean / false | 将格式化结果作为 HTML 渲染,适用于可信内容 |
ellipsis | boolean / false | 文本省略并使用原生 title 提示 |
overHidden、showOverflowTooltip | boolean / object | 溢出 Tooltip |
tooltipFormatter | function | 直接传给 Element Plus 表格列,接收底层 Tooltip 上下文;不是 Avue 的四参数 formatter |
sortable | boolean / 'custom' | 列排序;custom 时由 sort-change 发起业务请求 |
sortMethod、sortBy、sortOrders | function / string / array | 透传普通列的排序规则 |
filters | boolean / array | true 从共享字典或当前数据生成选项;数组格式 [{ label, value }] |
filterMethod | function | (value, row, column) => boolean,本地过滤 |
filterMultiple | boolean / true | 多选筛选 |
filteredValue、filterPlacement | array / string | 已选筛选值、筛选浮层方向 |
gridRow | boolean / false | 卡片字段另起一行 |
cell | boolean / false | 行编辑时使用此字段的编辑组件 |
display、addDisplay、editDisplay、viewDisplay | boolean | 表单显隐;通用 display 优先,默认显示 |
disabled、addDisabled、editDisabled | boolean | 表单禁用;通用 disabled 优先,查看模式只读 |
span、labelWidth、order、control | number / number / number / function | 沿用 Form 的布局、排序和联动配置 |
render | function | ({ row, column, index, dic, params, event }) => VNode,普通表格内容;自行从 Vue 导入 h |
renderForm、renderSearch | function | 表单 / 搜索自定义渲染,接收自定义组件上下文对象 |
renderHeader | function | 普通表格头部渲染,接收底层 { column, $index } |
cellRenderer、headerCellRenderer | function | 虚拟表渲染,使用 rowData/cellData/rowIndex 等 V2 上下文 |
字典
| 配置 | 类型 / 默认值 | 说明 |
|---|---|---|
dicData | array / function | 静态数组,或 (column) => array / Promise<array> |
dicUrl | string | 字典接口 URL |
dicMethod | string / 'get' | GET 的 dicQuery 放入 params,其余方法放入请求体 |
dicQuery、dicHeaders | object / {} | 请求参数、请求头;支持完整模板值 |
dicFormatter | function | (res, form) => array,res 已取 Axios 的 response.data |
dicFlag | boolean / 未设置 | false 跳过自动网络字典;true 允许弹窗重新请求,不能把默认值统一理解成 false |
dataType | string | 字典和字段的类型转换,如 string/number/array/json |
props | object | 字典字段映射,见下表 |
cascader、cascaderIndex | string[] / number | 联动的子字段、子字典默认选项下标 |
remote、lazy | boolean | 远程搜索或懒加载,由对应输入组件处理,不走普通逐行字典 |
| props 字段 | 默认值 | 用途 |
|---|---|---|
label、value | label、value | 标签和值 |
children、disabled | children、disabled | 子级和禁用标记 |
res | 未设置 | 从 Axios response.data 中继续取值的路径;未设置时尝试其中的 data,否则使用自身 |
普通逐行字典中的 {{key}} 是当前列值,级联子列中取上级值,远程搜索中取搜索词。完整用法和请求范围见 数据字典。
搜索字段
| 配置 | 类型 / 默认值 | 说明 |
|---|---|---|
search | boolean / false | 将字段加入搜索表单 |
searchProp | string | 仅在提交参数中改名,不改变原始 v-model:search 的字段 |
searchValue | any | 搜索初始值 |
searchType、searchRange | string / boolean | 搜索组件类型、范围输入 |
searchOrder | number / 0 | 数值越大越靠前,不改变表格列顺序 |
searchSpan、searchLabelWidth | number | 优先于全局搜索布局 |
searchPlaceholder、searchLabelPosition、searchSize | string | 搜索提示、标题位置、尺寸 |
searchRules、searchControl | array / function | 独立的搜索校验和联动逻辑 |
searchDisabled、searchReadonly、searchClearable | boolean | 搜索输入状态;未设置时沿用对应组件规则 |
searchMultiple、searchTags、searchRow | boolean | 多选、选中值文本展示、单独换行 |
searchTip、searchTipPlacement | string | 搜索项提示及方向 |
Events
数据、搜索与分页
| 事件 | 参数 | 触发与处理 |
|---|---|---|
row-save | row, done, loading | 新增提交;保存成功调用 done,失败调用 loading 结束提交态 |
row-update | row, index, done, loading | 编辑提交;index 是当前绑定列表中的下标 |
row-del | row, index, done | 删除操作;done() 从本地列表删除该主键记录,不会请求接口 |
on-load | page | 首次、用户切页、改变条数 |
current-change、size-change | currentPage / pageSize | 分页变化通知,已同时触发 on-load |
prev-click、next-click | currentPage | 分页上一页 / 下一页点击 |
search-change | form, done | 提交后的参数已去掉空值及 $ 字段,并应用 searchProp;业务自行回第 1 页,结束时调用 done |
search-reset | searchForm | 搜索清空后通知;不会自动请求列表 |
search-icon-change | expanded | 搜索半折叠展开状态 |
refresh-change | 无 | 工具栏刷新,需要业务重新加载 |
date-change | 日期组件的 change 对象 | dateBtn 的日期变化,选中值在 params.value |
change | form | 弹窗表单模型变化 |
error | 校验错误对象 | 弹窗提交校验未通过 |
tab-click | tab, event | 弹窗分组标签切换 |
dic-error | { type, error } | 字典请求失败;可结合实例的 dicLoading/dicError 展示状态 |
filter | [[prop, operator, value], ...] | 自定义过滤弹窗提交条件,由业务处理 |
update:modelValue、update:search、update:page | 新值 | 对应 v-model 的更新事件 |
弹窗的 done() 关闭窗口;done(savedRow) 还会按主键把返回记录同步到本地列表。行编辑的 done(savedRow?) 结束该行编辑并更新记录。使用服务端重新取列表时,一般调用无参数 done() 即可;新增行编辑应带回服务端生成的主键。详见 增删改查。
表格交互
| 事件 | 参数 | 说明 |
|---|---|---|
selection-change | selection | 已选集合变化 |
selection-clear | 清空前的已选集合 | 通过 CRUD clearSelection 清空时通知 |
select、select-all | selection, row / selection | 普通表格手动勾选 / 全选 |
current-row-change | currentRow | 当前实现只转发当前行,不转发 oldCurrentRow |
tree-load | row, treeNode, resolve | 异步加载后调用 resolve(children),无子项也需 resolve([]) |
expand-change | row, expandedRows 或 row, expanded | 展开列返回行数组,树表返回布尔值 |
sort-change | { column, prop, order } | 普通表格列排序 |
filter-change | { [prop]: values[] } | 普通表格列筛选 |
sortable-change | oldIndex, newIndex, row, sortedList | 行拖拽;3.9.5 自动同步 data,不需要 refreshTable |
column-sortable-change | 见下方说明 | 列拖拽及列设置排序 |
header-dragend | newWidth, oldWidth, column, event | 列宽拖动结束 |
column-state-change | state, reason | 持久化状态保存 |
column-state-reset | columnStateKey | 持久化状态重置 |
grid-status-change | isGrid | true 为卡片,false 为普通表格 |
scroll | 底层滚动对象 | 普通表格包含 scrollLeft/scrollTop |
row-click、row-contextmenu | row, column, event | 普通表格行点击 / 右键 |
row-dblclick | row, column | 当前普通表格包装器只转发前两个参数 |
cell-click、cell-dblclick、cell-mouse-enter、cell-mouse-leave | row, column, cell, event | 普通表格单元格交互 |
header-click、header-contextmenu | column, event | 表头点击 / 右键 |
3.9.5 的列排序会发出 { oldIndex, newIndex, column } 对象;表头拖拽路径还会兼容触发一次 (oldIndex, newIndex)。保存到接口时只处理其中一种,避免重复提交,例如只接受对象参数。卡片模式的行点击 / 双击参数为 (row, index),单元格点击 / 双击为 (row, column);不要按普通表格的 DOM 事件参数使用。
Methods
通过 ref 调用。弹窗表单方法应在窗口打开后的回调或 nextTick 中使用。
| 方法 | 参数 / 返回值 | 用途 |
|---|---|---|
rowAdd() | 无 | 打开新增窗口 |
rowEdit(row, index)、rowView(row, index) | 当前记录及下标 | 打开编辑 / 查看窗口 |
rowCopy(row) | 当前记录 | 复制数据、移除主键后打开新增窗口 |
rowSave()、rowUpdate() | 无 | 主动触发当前弹窗提交及校验 |
rowDel(row, index) | 当前记录及下标 | 触发 row-del 事件,不自动删除 |
closeDialog() | 无 | 关闭弹窗,仍经过 before-close |
validate(callback) | callback(valid, loading, errors) | 弹窗校验;当前实现不返回 Promise。校验成功会进入禁用状态,用 loading() 结束 |
validateField(props, callback?) | string / string[] | 弹窗字段校验,透传内部 Form |
clearValidate(props?) | string / string[] | 清除校验;弹窗打开前对应行编辑表单,打开后由弹窗表单方法接管 |
resetForm(reset = true) | boolean | 弹窗表单重置;false 不清空字段,只清理校验;两者都会触发弹窗关闭流程。CRUD 没有 resetFields 包装方法 |
getPropRef(prop) | 字段名 | 获取弹窗字段组件 |
rowCellAdd(row?) | 初始行数据 | 添加一条处于编辑态的行 |
rowCellEdit(row, index)、rowCellUpdate(row, index) | 当前记录及下标 | 进入行编辑 / 校验并触发行保存事件 |
rowCancel(row, index) | 当前记录及下标 | 取消行编辑,未有主键的新行会移除 |
validateCellForm() | Promise<errors> | 校验行编辑表单,结果为错误集合,不是布尔值 |
clearSelection() | 无 | 清空选择,并触发 selection-clear |
toggleSelection(rows?, checked?) | 行数组、可选布尔值 | 不传 rows 时清空;true 强制选择,false 取消,否则切换 |
toggleRowSelection(row, selected?, ignoreSelectable?) | 透传底层表格 | 选择单行,具体第三参数能力取决于 Element Plus |
toggleAllSelection() | 无 | 当前页全选 / 取消全选 |
getHalfSelectionRows() | 返回底层结果 | 取得树表半选行,需要底层版本支持 |
toggleRowExpansion(row, expanded?) | 记录、可选布尔值 | 展开 / 收起 |
setCurrentRow(row?) | 记录 | 设置 / 清除高亮行 |
clearFilter(keys?)、clearSort() | 字段数组 / 无 | 清理普通表格筛选 / 排序 |
doLayout() | 无 | 容器显示后重新计算布局 |
scrollTo(...args)、setScrollTop(top)、setScrollLeft(left) | 透传底层 | 滚动控制 |
updateKeyChildren(key, children) | 行主键、子数组 | 刷新已加载的懒加载子节点,需要底层表格支持 |
refreshTable(callback?) | 回调 | 重新挂载表格并清空选择,不请求业务数据 |
searchReset() | 无 | 重置搜索表单,触发 search-reset |
searchChange(form, done?) | 搜索对象、结束回调 | 规范化参数后发出 search-change,不会自行请求接口 |
dicInit(type?) | Promise | 无参数刷新网络及普通逐行字典;传 'cascader' 刷新表格级联字典 |
updateDic(prop, list?) | Promise | 指定字段字典;不传有效 list 且有 dicUrl 时重新请求 |
getRowDic(row, column) | array / undefined | 取得当前行实际使用的字典 |
resetColumnState(callback?) | 回调 | 清除当前 key 状态并恢复初始列配置 |
rowExcel()、rowPrint() | 无 | 打开导出面板 / 打印当前表格 |
字典请求失败通过 dic-error 通知并返回 null,不要仅依靠 dicInit().catch() 显示错误。普通表格未被 CRUD 包装的方法可在确认底层类型后通过 crudRef.value.$refs.table 调用,例如 table.sort(prop, order);虚拟表和卡片没有全部普通表格方法。
Slots
prop 表示列字段名。以下名称使用短横线,例如 search-menu,不是 searchMenu。
| 插槽 | 作用域参数 | 用途 |
|---|---|---|
prop | { row, column, tableColumn, index, dic, size, label } | 普通表格 / 卡片自定义单元格 |
prop-header | { column, $index } | 普通列标题 |
prop-search | 搜索字段的 Form 作用域 | 自定义搜索输入 |
prop-form | 字段的 Form 作用域及 type | 弹窗 / 行编辑的自定义输入 |
prop-label、prop-error、prop-desc、prop-type | 对应 Form 作用域及弹窗 type | 字段标题、错误、描述、组件类型内容 |
search | { row, search, size } | 搜索区自定义内容 |
search-menu | Form 菜单作用域及 row/search | 搜索按钮区追加内容 |
header、body、footer | 无 | 工具栏前、表格前、表格后 |
empty | 无 | 空数据内容 |
page | 无 | 分页区域中追加内容,仍受 total 和 option.page 控制 |
tip | { selection, count } | 已选提示区域追加操作 |
expand | { row, index } | 展开行内容 |
menu-left、menu-right | { size } | 表格上方左右工具栏追加按钮 |
menu-header | 底层表头作用域及 size | 操作列标题 |
menu-before、menu | { row, column, index, size, disabled, type } | 默认行按钮之前 / 之后追加内容 |
menu-btn-before、menu-btn | 同上 | 下拉菜单中默认选项之前 / 之后追加内容 |
menu-form-before、menu-form | { type, size, disabled } | 弹窗默认按钮之前 / 之后追加内容 |
菜单插槽通常是追加区域;需要完全替换时,先关闭相应默认按钮。虚拟表内容使用 cellRenderer,不经过上述普通列内容插槽。
