表格

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.0+) 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。更多信息:屏幕插件

粘性标题/列

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

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

Virtual scroll and pagination

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

Virtual scroll with sticky header

选择

WARNING

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

Single selection
Multiple selection and custom selected rows label

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

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

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

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

扩展行

Expanded row and custom selector

插槽之前/之后

Before/After slots (header/footer)

分页

TIP

如果您想控制表格的分页,请使用pagination属性,但不要忘记添加.sync修饰符

TIP

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

Pagination with initial sort and rows per page

加载状态

Loading

自定义顶部

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

自定义排序

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

QTable API

Loading API...
Please wait...

QTh API

Loading API...
Please wait...

QTr API

Loading API...
Please wait...

QTd API

Loading API...
Please wait...