primeVue DataTable组件的属性值使用
Name | Type | Default | description |
---|---|---|---|
value | null | any[] | null |
要显示的对象数组。 |
dataKey | string | Function | null |
唯一标识数据中的记录的字段名称。 |
rows | number | 0 |
每页显示的行数。 |
first | number | 0 |
要显示的第一行的索引。 |
totalRecords | number | 0 |
总记录数,未定义时默认为值的长度。 |
paginator | boolean | false |
当指定为 true 时,启用分页。 |
paginatorPosition | "top" | "bottom" | "both" | bottom |
分页器的位置,选项为“顶部”、“底部”或“两者”。 |
alwaysShowPaginator | boolean | true |
即使只有一页也显示 |
paginatorTemplate | any | FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown |
分页器的模板。可以使用预定义键通过模板属性进行自定义。- FirstPageLink - PrevPageLink - PageLinks - NextPageLink - LastPageLink - RowsPerPageDropdown - JumpToPageDropdown - JumpToPageInput - CurrentPageReport |
pageLinkSize | number | 5 |
要显示的页面链接数。 |
rowsPerPageOptions | number[] | null |
每页下拉列表中显示的行内的整数值数组。 |
currentPageReportTemplate | string | '({currentPage} of {totalPages})' |
当前页面报告元素的模板。它显示有关分页状态的信息。可用的占位符如下:- {currentPage} - {totalPages} - {rows} - {first} - {last} - {totalRecords} |
lazy | boolean | false |
定义是否以惰性方式加载和交互数据。 |
loading | boolean | false |
显示加载器以指示数据加载正在进行中。 |
loadingIcon | string | null |
显示的图标表示数据加载正在进行中。 |
sortField | string | Function | null |
默认用于排序的行数据的属性名或 getter 函数 |
sortOrder | number | null |
按默认顺序对数据进行排序。 |
nullSortOrder | number | 1 |
确定空值的排序方式。 |
defaultSortOrder | number | 1 |
未排序列的默认排序顺序。 |
multiSortMeta | DataTableSortMeta[] | null |
用于对数据进行排序的 SortMeta 对象数组。 |
sortMode | "single" | "multiple" | single |
定义排序是否对单列或多列进行。 |
removableSort | boolean | false |
启用后,列可以处于未排序状态。 |
filters | DataTableFilterMeta | null |
使用键值对的过滤器对象来定义过滤器。 |
filterDisplay | "menu" | "row" | null |
过滤元件的布局。 |
globalFilterFields | (string | Function)[] | null |
用于全局过滤的字符串或函数形式的字段数组。 |
filterLocale | string | null |
过滤时使用的区域设置。默认区域设置是主机环境的当前区域设置。 |
selection | any | null |
在单一模式下选定行或在多重模式下选定值数组。 |
selectionMode | "single" | "multiple" | null |
指定选择模式。 |
compareSelectionBy | "equals" | "deepEquals" | deepEquals |
定义是否选择了某一行的算法。 |
metaKeySelection | boolean | false |
定义选择是否需要 metaKey。设置为 true 时,需要按下 metaKey 来选择或取消选择某项;设置为 false 时,可以单独切换每项选择。在支持触摸的设备上,metaKeySelection 会自动关闭。 |
contextMenu | boolean | false |
启用上下文菜单集成。 |
contextMenuSelection | any | null |
使用 ContextMenu 选定的行实例。 |
selectAll | Nullable<boolean> | null |
是否选择所有数据。 |
rowHover | boolean | false |
启用后,行的背景会在悬停时发生变化。 |
csvSeparator | string | , |
用作 csv 分隔符的字符。 |
exportFilename | string | download |
导出文件的名称。 |
exportFunction | Function | null |
|
resizableColumns | boolean | false |
启用后,可以通过拖放操作调整列的大小。 |
columnResizeMode | "fit" | "expand" | fit |
定义表格的整体宽度。 |
reorderableColumns | boolean | false |
启用后,可以通过拖放操作对列进行重新排序。 |
expandedRows | null | any[] | DataTableExpandedRows | null |
以扩展形式显示的行数据集合。 |
expandedRowIcon | string | null |
行切换器的图标用于显示扩展的行。 |
collapsedRowIcon | string | null |
行切换器的图标用于显示折叠的行。 |
rowGroupMode | "subheader" | "rowspan" | null |
定义行组模式。 |
groupRowsBy | string | string[] | Function | null |
用于行分组的一个或多个字段名称。 |
expandableRowGroups | boolean | false |
行组是否可以展开。 |
expandedRowGroups | any[] | DataTableExpandedRows | null |
一组字段值的数组,这些字段值的组将呈现为展开的。 |
stateStorage | "session" | "local" | session |
定义有状态表保存其状态的位置。 |
stateKey | string | null |
在状态存储中使用的有状态表的唯一标识符。 |
editMode | "row" | "cell" | null |
定义单元格内的编辑模式。 |
editingRows | any[] | DataTableEditingRows | null |
用于表示行编辑模式下当前编辑数据的行集合。 |
rowClass | Function | null |
|
rowStyle | Function | null |
|
scrollable | boolean | false |
指定后,启用水平和/或垂直滚动。 |
scrollHeight | HintedString<"flex"> | null |
滚动视口的高度(以固定像素为单位)或“flex”关键字表示动态尺寸。 |
virtualScrollerOptions | any | null | 是否使用 virtualScroller 特性。VirtualScroller 组件的属性可以像对象一样使用。注意:目前仅支持垂直方向模式。 |
frozenValue | null | any[] | null | 可滚动 DataTable 中冻结部分的项目。 |
breakpoint | string | 960px | 使用堆栈响应式布局时定义最大宽度边界的断点。 |
showGridlines | boolean | false | 是否显示单元格之间的网格线。 |
stripedRows | boolean | false | 是否以交替颜色显示行。 |
highlightOnSelect | boolean | false | 自动突出显示第一项。 |
size | "large" | "small" | null | 定义表的大小。 |
tableStyle | string | object | null | 表格元素的内联样式。 |
tableClass | string | object | null | 表格元素的样式类。 |
tableProps | TableHTMLAttributes | null | 用于将 TableHTMLAttributes 的所有属性传递给组件内的表元素。 |
filterInputProps | InputHTMLAttributes 输入HTML属性 |
null | 用于将 HTMLInputElement 的所有属性传递给组件内部可聚焦的过滤输入元素。 |
filterButtonProps | null | 用于传递所有过滤器按钮属性对象 | |
editButtonProps | null | 用于传递所有编辑按钮属性对象 | |
dt | any | null | 它使用组件的设计令牌生成范围 CSS 变量。 |
pt | PassThrough<DataTablePassThroughOptions> | null | 用于将属性传递给组件内部的 DOM 元素。 |
ptOptions | any | null | 用于配置组件的passthrough(pt)选项。 |
unstyled | boolean | false | 启用后,它会删除核心中与组件相关的样式。 |
Emits
name | parameters | returnType | description |
---|---|---|---|
update:first | value: number |
void |
当第一次改变时发出。 |
update:rows | value: number |
void |
当行发生变化时发出。 |
update:sortField | value: string |
void |
当 sortField 改变时发出。 |
update:sortOrder | value: undefined | number |
void |
当 sortOrder 改变时发出。 |
update:multiSortMeta | value: undefined | null | DataTableSortMeta[] |
void |
当 multiSortMeta 改变时发出。 |
update:selection | value: any |
void |
当选择改变时发出。 |
update:contextMenuSelection | value: any |
void |
当 contextMenuSelection 改变时发出 |
update:expandedRows | value: any[] | DataTableExpandedRows |
void |
当expandedRows改变时发出。 |
update:expandedRowGroups | value: any[] | DataTableExpandedRows |
void |
当expandedRowGroups改变时发出。 |
update:filters | value: DataTableFilterMeta |
void |
当过滤器改变时发出。 |
update:editingRows | value: any[] | DataTableEditingRows |
void |
当 editingRows 改变时发出。 |
page | event: DataTablePageEvent |
void |
分页时调用的回调。排序和过滤信息也可用于延迟加载实现。 |
sort | event: DataTableSortEvent |
void |
排序时调用的回调。页面和过滤器信息也可用于延迟加载实现。 |
filter | event: DataTableFilterEvent |
void |
过滤后发出的事件,在惰性模式下不会触发。 |
value-change | value: any[] |
void |
过滤、排序、分页和单元格编辑后调用的回调来传递渲染的值。 |
row-click | event: DataTableRowClickEvent |
void |
当单击某一行时调用的回调。 |
row-dblclick | event: DataTableRowDoubleClickEvent |
void |
双击某一行时调用的回调。 |
row-contextmenu | event: DataTableRowContextMenuEvent |
void |
当使用 ContextMenu 选择一行时调用的回调。 |
row-select | event: DataTableRowSelectEvent |
void |
当选择一行时调用的回调。 |
row-select-all | event: DataTableRowSelectAllEvent |
void |
当选中标题复选框时触发。 |
row-unselect-all | event: DataTableRowUnselectAllEvent |
void |
当标题复选框未选中时触发。 |
row-unselect | event: DataTableRowUnselectEvent |
void |
当取消选择某一行时调用的回调。 |
select-all-change | void |
当选择所有数据时调用的回调 | |
column-resize-end | void |
当调整列大小时调用的回调。 | |
column-reorder | event: DataTableColumnReorderEvent |
void |
当列重新排序时调用的回调。 |
row-reorder | event: DataTableRowReorderEvent |
void |
当行重新排序时调用的回调。 |
row-expand | event: DataTableRowExpandEvent |
void |
当行展开时调用的回调。 |
row-collapse | event: DataTableRowCollapseEvent |
void |
当行折叠时调用的回调。 |
rowgroup-expand | event: DataTableRowExpandEvent |
void |
当行组展开时调用的回调。 |
rowgroup-collapse | event: DataTableRowCollapseEvent |
void |
当行组折叠时调用的回调。 |
cell-edit-init | event: DataTableCellEditInitEvent |
void |
当启动单元格编辑时调用的回调。 |
cell-edit-complete | void |
当单元格编辑完成时调用的回调。 | |
cell-edit-cancel | event: DataTableCellEditCancelEvent |
void |
当使用退出键取消单元格编辑时调用的回调。 |
row-edit-init | event: DataTableRowEditInitEvent |
void |
当启动行编辑时调用的回调。 |
row-edit-save | event: DataTableRowEditSaveEvent |
void |
当行编辑被保存时调用的回调。 |
row-edit-cancel | event: DataTableRowEditCancelEvent |
void |
当取消行编辑时调用的回调。 |
state-restore | event: DataTableStateEvent |
void |
当有状态表保存状态时调用。 |
state-save | event: DataTableStateEvent |
void |
当有状态表恢复状态时调用。 |