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

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

QTable API

QTh API

QTr API

QTd 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先到达

    //（可选）覆盖“column-sort-order”属性；
    // 设置列排序顺序：“ad”（升序-降序）或“da”（升序-降序）
    sortOrder: 'ad', // 或 'da'

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

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

基础用法

省略列定义

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

粘性标题/列

分隔栏

风格

虚拟滚动

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

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

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

下面的示例显示了如何将虚拟滚动条与粘性标题一起使用。 注意virtual-scroll-sticky-start属性，它设置为标题高度。

有2个实用程序CSS类控制VirtualScroll的大小计算：

*在VirtualScroll渲染的元素上使用q-virtual-scroll--with-prev类，以指示该元素应与上一个元素分组（主要用例是从同一行数据生成的多个表行 ）。 *在VirtualScroll渲染的元素上使用q-virtual-scroll--skip类，以指示在尺寸计算中应忽略该元素的尺寸。

选择

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

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

弹出编辑

网格风格

在下面的示例中，我们让QTable实现显示网格模式（不使用特定的插槽）：

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

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

扩展行

还可以使用外部扩展模型：

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

插槽之前/之后

分页

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

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

第二个示例使用“v-model:pagination”指令，因为我们想随时访问其当前值。 以下技术的一个用例是从QTable的外部控制分页。

分页插槽

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

加载状态

自定义顶部

主体插槽

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

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

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

标题插槽

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

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

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

无数据

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

处理底层

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

自定义排序

响应式表格

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

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

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

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

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

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

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

导出数据

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

键盘导航

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