表格

QTable是允许您以表格方式显示数据的组件。 通常称为数据表。 它包含以下主要功能:

  • 过滤
  • 排序
  • 具有自定义选择操作的单行/多行选择
  • 分页(如果需要,包括服务器端)
  • 网格模式(例如,您可以使用QCard以非表格方式显示数据)
  • 通过有限范围的插槽,对行和单元格进行全面定制
  • 能够在数据行的顶部或底部添加额外的行
  • 列选取器(通过本页其中一节中描述的QTableColumns组件)
  • 自定义顶部或底部表格控件
  • 响应式设计

TIP

如果不需要分页,排序,过滤和QTable的所有其他功能,那么您可能想改用QMarkupTable组件。

安装

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

定义列

让我们以配置columns属性为例。 我们要告诉QTablerow-key是“name”,它必须是唯一的。 如果这是从数据库中获取的数据,我们可能会使用id行。

columns: [ // 对象数组
  // 列对象定义
  {
    // 唯一的ID
    // 标识列
    //(由pagination.sortBy使用,“body-cell-[name]”插槽,...)
    name: 'desc',

    // 头部标签
    label: 'Dessert (100g serving)',

    // 行对象属性以确定此列的值
    field: 'name',
    // 或者field: row => row.some.nested.prop

    // (可选)如果我们使用可见列,这个列将始终可见
    required: true,

    // (可选)对齐
    align: 'left',

    // (可选)告诉QTable你想要这个列可排序
    sortable: true,

    // (可选)比较功能,如果你有
    //  一些自定义数据或想要一个特定的方式来比较两行
    sort: (a, b, rowA, rowB) => parseInt(a, 10) - parseInt(b, 10),
    // 函数返回值:
    // *小于0,然后将a排序为低于b的索引,即首先出现
    // *为0,则相对于彼此保持a和b不变,但相对于所有不同的元素进行排序
    // *大于0,则将b排序为低于a的索引,即b先到达

    // (可选)您可以使用函数格式化数据
    format: (val, row) => `${val}%`
    // 另一个格式示例:
    // format: val => val
    //   ? /* 选中Unicode复选标记 */ "\u2611"
    //   : /* 未选中Unicode复选标记 */ "\u2610",

    // body td:
    style: 'width: 500px',
    classes: 'my-special-class'
    
    // (v1.3+) header th:
    headerStyle: 'width: 500px',
    headerClasses: 'my-special-class'
  },
  { name: 'calories', label: 'Calories', field: 'calories', sortable: true },
  { name: 'fat', label: 'Fat (g)', field: 'fat', sortable: true },
  { name: 'carbs', label: 'Carbs (g)', field: 'carbs' },
  { name: 'protein', label: 'Protein (g)', field: 'protein' },
  { name: 'sodium', label: 'Sodium (mg)', field: 'sodium' },
  { name: 'calcium', label: 'Calcium (%)', field: 'calcium', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) },
  { name: 'iron', label: 'Iron (%)', field: 'iron', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) }
]

基础用法

Basic
Dark
Dense

TIP

您可以将dense属性与$q.screen一起使用来创建响应行为。 例如::dense="$q.screen.lt.md。更多信息:屏幕插件

省略列定义

您可以忽略指定columns。 QTable将根据数据第一行的属性来推断列。 请注意,标签是大写的,并且启用了排序:

Infering columns from data

粘性标题/列

WARNING

粘性标题和列是通过CSS带有position: sticky来实现的。 并非所有浏览器都支持此功能。 使用此技术之前,请先检查caniuse.com

Sticky header
Sticky column
Sticky header and column

分隔栏

Separators

风格

Custom column
Custom coloring
No header/footer

虚拟滚动

请注意,启用虚拟滚动时,您需要指定table-style(带有一个max-height)属性。 在下面的示例中,我们还强制QTable同时显示所有行(请注意使用paginationrows-per-page-options属性)。

Basic virtual scroll

您可以在滚动结束时动态加载新行:

Dynamic loading virtual scroll

您可以同时具有虚拟滚动和分页:

Virtual scroll and pagination

下面的示例显示了如何将虚拟滚动条与粘性标题一起使用。 注意virtual-scroll-sticky-start属性,它设置为标题高度。 另请注意,由于缺少对值为“sticky”的CSS属性“position”的支持,因此这在IE11中将不起作用。

Virtual scroll with sticky header

从v1.8.4开始,有2个实用程序CSS类控制VirtualScroll的大小计算: *在VirtualScroll渲染的元素上使用q-virtual-scroll--with-prev类,以指示该元素应与上一个元素分组(主要用例是从同一行数据生成的多个表行 )。 *在VirtualScroll渲染的元素上使用q-virtual-scroll--skip类,以指示在尺寸计算中应忽略该元素的尺寸。

Virtual scroll with multiple rows for a data row

选择

WARNING

必须设置属性row-key,才能使选择正常工作。

Single selection
Multiple selection
Selection cell slots (v1.14+)
Custom multiple selection

可见列、自定义顶部、全屏

请注意,标记为required(在列定义中)的列无法切换,并且始终可见。

Visible columns, custom top and fullscreen
Visible columns

弹出编辑

TIP

下面是一个示例,其中用户可以借助QPopupEdit组件“就地”编辑。 请注意,我们正在使用body作用域插槽。 QPopupEdit不适用于单元格作用域插槽。

Popup editing

网格风格

TIP

您可以将grid属性与$q.screen一起使用来创建响应行为。 例如:`:grid="$q.screen.lt.m。更多信息:屏幕插件

在下面的示例中,我们让QTable实现显示网格模式(不使用特定的插槽):

Grid style
Grid with header
Colored grid style
Masonry like grid

但是,如果要完全自定义内容,请查看以下示例,其中:

  • 我们正在使用一个名为item的Vue范围内的插槽来定义每条记录(在非网格模式下相当于一行)的外观。 这使您完全自由。
  • 我们正在使用多项选择。
Grid style with slot

扩展行

WARNING

如果您从一行数据中生成多个QTr,请在QTr上添加唯一的(独特的)key

Internal expansion model

从v1.8.3开始,还可以使用外部扩展模型:

External expansion model

如果您将虚拟滚动与QTable一起使用,则应该知道从v1.8.4开始,有2个实用程序CSS类控制VirtualScroll的大小计算: *在VirtualScroll渲染的元素上使用q-virtual-scroll--with-prev类,以指示该元素应与上一个元素分组(主要用例是从同一行数据生成的多个表行 )。 *在VirtualScroll渲染的元素上使用q-virtual-scroll--skip类,以指示在尺寸计算中应忽略该元素的尺寸。

Virtual scroll with expansion model

插槽之前/之后

Before/After slots (header/footer)

分页

WARNING

在Quasar <= v1.11上,使用pagination属性需要使用.sync修饰符。 在v1.12 +中,这不再是必需的,但是如果您想通过自己的组件控制Table的分页,则仍然必须这样做。 例如:pagination.sync="pagination"

TIP

如果pagination具有名为rowsNumber的属性,则意味着您将为Table配置服务器端分页(以及排序和过滤)。 请参阅服务器端分页、过滤和排序章节

以下是处理分页的两个示例(以及每页的排序和行数)。

第一个示例重点介绍如何配置初始分页:

Initial pagination

第二个示例使用“ .sync”修饰符,因为我们想随时访问其当前值。 以下技术的一个用例是从QTable的外部控制分页。

Synchronized pagination

分页插槽

出于学习目的,我们将自定义分页控件为默认控件,以帮助您入门。

Pagination slot

加载状态

Default loading

以下示例需要Quasar v1.8 +:

Custom loading state

自定义顶部

Custom top with add/remove row

主体插槽

以下示例显示了如何使用插槽来定制整个行:

Body slot

在下面,我们使用一个插槽,该插槽将应用于每个主体单元格:

Body-cell slot

我们也只能自定义一个特定的列。 该插槽的语法为body-cell-[name],其中[name]应替换为用作row-key的每一行的属性。

Body-cell-[name] slot

标题插槽

下面的示例显示如何使用插槽自定义整个标题行:

Header slot

在下面,我们使用一个插槽,该插槽将应用于每个标题单元格:

Header-cell slot

v1.1.1+ 开始,我们还只能自定义一个特定的标题单元格。 该插槽的语法为header-cell-[name],其中[name]应替换为用作row-key的每一行的属性。

Header-cell-[name] slot

无数据

No Data Label

v1.1.1+ 开始,还有一个“no-data”作用域的插槽(如下所示),当过滤器不返回任何结果或表没有任何内容时,您还可以自定义消息 。 还要在“Search”输入框中输入内容。

No Data Slot

处理底层

您可以使用一些属性来隐藏底层或其特定部分。 您可以通过下面例子来演示:

Hiding bottom layer

自定义排序

Custom sorting

响应式表格

为了创建响应表,我们有两个工具可供使用: densegrid属性。 我们可以将它们与$q.screen连接。 更多信息:屏幕插件

下面的第一个示例使用$q.screen.lt.md(用于启用密集模式),第二个示例使用$q.screen.xs来启用网格模式,因此请使用浏览器宽度查看它们的运行情况。

Using dense prop
Using grid prop

上面的示例实质上是在模仿早期Quasar版本的表行为。

服务器端分页、过滤和排序

当您的数据库中包含一个表的大量行时,显然由于多种原因(内存、UI渲染性能等)而全部加载它们是不可行的。相反,您只能加载表格页面。每当用户想要导航到另一个表格页面,或想要按列排序或想要过滤表格时,请求就会发送到服务器以获取部分分页的数据。

  1. 启用此行为的第一步是指定pagination属性,该属性必须包含“rowsNumber”。 QTable需要知道可用的总行数才能正确渲染分页链接。如果过滤导致rowsNumber改变,则必须动态修改。

  2. 第二步是在QTable上监听@request事件。当由于页码或排序或过滤发生更改而需要从服务器获取数据时,将触发此事件。

  3. 最好还指定loading属性,以通知用户正在进行后台处理

TIP

在下面的示例中,已采取步骤来模拟对服务器的Ajax调用。虽然概念相似,但是如果使用此代码,则需要进行适当的更改以连接到自己的数据源。

Synchronizing with server

导出数据

下面是一个简单的csv编码示例,然后使用Quasar的实用程序exportFile导出表数据。 浏览器应触发文件下载。 对于编码方面的更专业的方法,我们建议使用csv-parsecsv-stringify包。

TIP

如果您要导出用户过滤和排序后的数据,也可以使用QTable的filteredSortedRows内部计算属性。

Export to csv

键盘导航

下面是使用选定行在表中进行键盘导航的示例。 使用ArrowUp, ArrowDown, PageUp, PageDown, HomeEnd键进行导航。

Keyboard navigation

QTable API

Loading API...
Please wait...

QTh API

Loading API...
Please wait...

QTr API

Loading API...
Please wait...

QTd API

Loading API...
Please wait...