表格

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

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

TIP

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

QTable API

Loading API...

QTh API

Loading API...

QTr API

Loading API...

QTd API

Loading API...

定义列

让我们以配置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先到达

    //(可选;需要Quasar v1.15.11+)覆盖“column-sort-order”属性;
    // 设置列排序顺序:“ad”(升序-降序)或“da”(升序-降序)
    sortOrder: 'ad', // 或 'da'

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

    // body td:
    style: 'width: 500px',
    // 或作为函数(需要v1.15.15+) --> style: row => ... (return String/Array/Object)
    classes: 'my-special-class'
    //或作为函数(需要v1.15.15+) --> classes: row => ... (return String)
    
    // (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






虚拟滚动

请注意,启用虚拟滚动时,您需要指定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 with range selection (v1.14+)



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



插槽之前/之后




分页

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