PrimeVue DataTable 属性值解析

发布于:2024-09-05 ⋅ 阅读:(142) ⋅ 点赞:(0)

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

当有状态表恢复状态时调用。

网站公告

今日签到

点亮在社区的每一天
去签到