当前位置：首页 > article >正文

PrimeVue DataTable 属性值解析

article 2024/11/14 5:52:35

primeVue DataTable组件的属性值使用

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	DataTableFilterButtonPropsOptions 数据表过滤器按钮属性选项	null	用于传递所有过滤器按钮属性对象
editButtonProps	DataTableEditButtonPropsOptions 数据表编辑按钮道具选项	null	用于传递所有编辑按钮属性对象
dt	any	null	它使用组件的设计令牌生成范围 CSS 变量。
pt	PassThrough<DataTablePassThroughOptions>	null	用于将属性传递给组件内部的 DOM 元素。
ptOptions	any	null	用于配置组件的passthrough(pt)选项。
unstyled	boolean	false	启用后，它会删除核心中与组件相关的样式。

Emits

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	event: DataTableSelectAllChangeEvent	void	当选择所有数据时调用的回调
column-resize-end	event: DataTableColumnResizeEndEvent	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	event: DataTableCellEditCompleteEvent	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	当有状态表恢复状态时调用。