PrimeVue DataTable 属性值解析

primeVue DataTable组件的属性值使用

DataTable属性
NameTypeDefaultdescription
valuenull | any[]

null

要显示的对象数组。
dataKeystring | Function

null

唯一标识数据中的记录的字段名称。
rowsnumber

0

每页显示的行数。
firstnumber

0

要显示的第一行的索引。
totalRecordsnumber

0

总记录数,未定义时默认为值的长度。
paginatorboolean

false

当指定为 true 时,启用分页。
paginatorPosition"top" | "bottom" | "both"

bottom

分页器的位置,选项为“顶部”、“底部”或“两者”。
alwaysShowPaginatorboolean

true

即使只有一页也显示
paginatorTemplateany

FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown

分页器的模板。可以使用预定义键通过模板属性进行自定义。- FirstPageLink - PrevPageLink - PageLinks - NextPageLink - LastPageLink - RowsPerPageDropdown - JumpToPageDropdown - JumpToPageInput - CurrentPageReport
pageLinkSizenumber

5

要显示的页面链接数。
rowsPerPageOptionsnumber[]

null

每页下拉列表中显示的行内的整数值数组。
currentPageReportTemplatestring

'({currentPage} of {totalPages})'

当前页面报告元素的模板。它显示有关分页状态的信息。可用的占位符如下:- {currentPage} - {totalPages} - {rows} - {first} - {last} - {totalRecords}
lazyboolean

false

定义是否以惰性方式加载和交互数据。
loadingboolean

false

显示加载器以指示数据加载正在进行中。
loadingIconstring

null

显示的图标表示数据加载正在进行中。
sortFieldstring | Function

null

默认用于排序的行数据的属性名或 getter 函数
sortOrdernumber

null

按默认顺序对数据进行排序。
nullSortOrdernumber

1

确定空值的排序方式。
defaultSortOrdernumber

1

未排序列的默认排序顺序。
multiSortMetaDataTableSortMeta[]

null

用于对数据进行排序的 SortMeta 对象数组。
sortMode"single" | "multiple"

single

定义排序是否对单列或多列进行。
removableSortboolean

false

启用后,列可以处于未排序状态。
filtersDataTableFilterMeta

null

使用键值对的过滤器对象来定义过滤器。
filterDisplay"menu" | "row"

null

过滤元件的布局。
globalFilterFields(string | Function)[]

null

用于全局过滤的字符串或函数形式的字段数组。
filterLocalestring

null

过滤时使用的区域设置。默认区域设置是主机环境的当前区域设置。
selectionany

null

在单一模式下选定行或在多重模式下选定值数组。
selectionMode"single" | "multiple"

null

指定选择模式。
compareSelectionBy"equals" | "deepEquals"

deepEquals

定义是否选择了某一行的算法。
metaKeySelectionboolean

false

定义选择是否需要 metaKey。设置为 true 时,需要按下 metaKey 来选择或取消选择某项;设置为 false 时,可以单独切换每项选择。在支持触摸的设备上,metaKeySelection 会自动关闭。
contextMenuboolean

false

启用上下文菜单集成。
contextMenuSelectionany

null

使用 ContextMenu 选定的行实例。
selectAllNullable<boolean>

null

是否选择所有数据。
rowHoverboolean

false

启用后,行的背景会在悬停时发生变化。
csvSeparatorstring

,

用作 csv 分隔符的字符。
exportFilenamestring

download

导出文件的名称。
exportFunctionFunction

null

resizableColumnsboolean

false

启用后,可以通过拖放操作调整列的大小。
columnResizeMode"fit" | "expand"

fit

定义表格的整体宽度。
reorderableColumnsboolean

false

启用后,可以通过拖放操作对列进行重新排序。
expandedRowsnull | any[] | DataTableExpandedRows

null

以扩展形式显示的行数据集合。
expandedRowIconstring

null

行切换器的图标用于显示扩展的行。
collapsedRowIconstring

null

行切换器的图标用于显示折叠的行。
rowGroupMode"subheader" | "rowspan"

null

定义行组模式。
groupRowsBystring | string[] | Function

null

用于行分组的一个或多个字段名称。
expandableRowGroupsboolean

false

行组是否可以展开。
expandedRowGroupsany[] | DataTableExpandedRows

null

一组字段值的数组,这些字段值的组将呈现为展开的。
stateStorage"session" | "local"

session

定义有状态表保存其状态的位置。
stateKeystring

null

在状态存储中使用的有状态表的唯一标识符。
editMode"row" | "cell"

null

定义单元格内的编辑模式。
editingRowsany[] | DataTableEditingRows

null

用于表示行编辑模式下当前编辑数据的行集合。
rowClassFunction

null

rowStyleFunction

null

scrollableboolean

false

指定后,启用水平和/或垂直滚动​​。
scrollHeightHintedString<"flex">

null

滚动视口的高度(以固定像素为单位)或“flex”关键字表示动态尺寸。
virtualScrollerOptionsanynull是否使用 virtualScroller 特性。VirtualScroller 组件的属性可以像对象一样使用。注意:目前仅支持垂直方向模式。
frozenValuenull | any[]null可滚动 DataTable 中冻结部分的项目。
breakpointstring960px使用堆栈响应式布局时定义最大宽度边界的断点。
showGridlinesbooleanfalse是否显示单元格之间的网格线。
stripedRowsbooleanfalse是否以交替颜色显示行。
highlightOnSelectbooleanfalse自动突出显示第一项。
size"large" | "small"null定义表的大小。
tableStylestring | objectnull表格元素的内联样式。
tableClassstring | objectnull表格元素的样式类。
tablePropsTableHTMLAttributesnull用于将 TableHTMLAttributes 的所有属性传递给组件内的表元素。
filterInputProps

InputHTMLAttributes

输入HTML属性

null用于将 HTMLInputElement 的所有属性传递给组件内部可聚焦的过滤输入元素。
filterButtonProps

DataTableFilterButtonPropsOptions

数据表过滤器按钮属性选项

null用于传递所有过滤器按钮属性对象
editButtonProps

DataTableEditButtonPropsOptions

数据表编辑按钮道具选项

null用于传递所有编辑按钮属性对象
dtanynull它使用组件的设计令牌生成范围 CSS 变量。
ptPassThrough<DataTablePassThroughOptions>null用于将属性传递给组件内部的 DOM 元素。
ptOptionsanynull用于配置组件的passthrough(pt)选项。
unstyledbooleanfalse启用后,它会删除核心中与组件相关的样式。

Emits

Emits
nameparametersreturnTypedescription
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

当有状态表恢复状态时调用。
  • 21
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值