PrimeVue DataTable 属性值解析

2024-08-31 17:44

本文主要是介绍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

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

这篇关于PrimeVue DataTable 属性值解析的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1124570

相关文章

Java如何通过反射机制获取数据类对象的属性及方法

《Java如何通过反射机制获取数据类对象的属性及方法》文章介绍了如何使用Java反射机制获取类对象的所有属性及其对应的get、set方法,以及如何通过反射机制实现类对象的实例化,感兴趣的朋友跟随小编一... 目录一、通过反射机制获取类对象的所有属性以及相应的get、set方法1.遍历类对象的所有属性2.获取

使用Python实现批量访问URL并解析XML响应功能

《使用Python实现批量访问URL并解析XML响应功能》在现代Web开发和数据抓取中,批量访问URL并解析响应内容是一个常见的需求,本文将详细介绍如何使用Python实现批量访问URL并解析XML响... 目录引言1. 背景与需求2. 工具方法实现2.1 单URL访问与解析代码实现代码说明2.2 示例调用

SSID究竟是什么? WiFi网络名称及工作方式解析

《SSID究竟是什么?WiFi网络名称及工作方式解析》SID可以看作是无线网络的名称,类似于有线网络中的网络名称或者路由器的名称,在无线网络中,设备通过SSID来识别和连接到特定的无线网络... 当提到 Wi-Fi 网络时,就避不开「SSID」这个术语。简单来说,SSID 就是 Wi-Fi 网络的名称。比如

SpringCloud配置动态更新原理解析

《SpringCloud配置动态更新原理解析》在微服务架构的浩瀚星海中,服务配置的动态更新如同魔法一般,能够让应用在不重启的情况下,实时响应配置的变更,SpringCloud作为微服务架构中的佼佼者,... 目录一、SpringBoot、Cloud配置的读取二、SpringCloud配置动态刷新三、更新@R

使用Java解析JSON数据并提取特定字段的实现步骤(以提取mailNo为例)

《使用Java解析JSON数据并提取特定字段的实现步骤(以提取mailNo为例)》在现代软件开发中,处理JSON数据是一项非常常见的任务,无论是从API接口获取数据,还是将数据存储为JSON格式,解析... 目录1. 背景介绍1.1 jsON简介1.2 实际案例2. 准备工作2.1 环境搭建2.1.1 添加

在C#中合并和解析相对路径方式

《在C#中合并和解析相对路径方式》Path类提供了几个用于操作文件路径的静态方法,其中包括Combine方法和GetFullPath方法,Combine方法将两个路径合并在一起,但不会解析包含相对元素... 目录C#合并和解析相对路径System.IO.Path类幸运的是总结C#合并和解析相对路径对于 C

Java解析JSON的六种方案

《Java解析JSON的六种方案》这篇文章介绍了6种JSON解析方案,包括Jackson、Gson、FastJSON、JsonPath、、手动解析,分别阐述了它们的功能特点、代码示例、高级功能、优缺点... 目录前言1. 使用 Jackson:业界标配功能特点代码示例高级功能优缺点2. 使用 Gson:轻量

Java如何接收并解析HL7协议数据

《Java如何接收并解析HL7协议数据》文章主要介绍了HL7协议及其在医疗行业中的应用,详细描述了如何配置环境、接收和解析数据,以及与前端进行交互的实现方法,文章还分享了使用7Edit工具进行调试的经... 目录一、前言二、正文1、环境配置2、数据接收:HL7Monitor3、数据解析:HL7Busines

vue如何监听对象或者数组某个属性的变化详解

《vue如何监听对象或者数组某个属性的变化详解》这篇文章主要给大家介绍了关于vue如何监听对象或者数组某个属性的变化,在Vue.js中可以通过watch监听属性变化并动态修改其他属性的值,watch通... 目录前言用watch监听深度监听使用计算属性watch和计算属性的区别在vue 3中使用watchE

python解析HTML并提取span标签中的文本

《python解析HTML并提取span标签中的文本》在网页开发和数据抓取过程中,我们经常需要从HTML页面中提取信息,尤其是span元素中的文本,span标签是一个行内元素,通常用于包装一小段文本或... 目录一、安装相关依赖二、html 页面结构三、使用 BeautifulSoup javascript