Quasar 的 QTable 选定行在 @selection 事件回调修改后未更新

Question

使用 QTable 的 Selection 功能时，我们可以使用两个事件。一种是

@update:selected -> function(newSelected)

，它在选择（或取消选择）完成并反映后触发。第二个是

@selection -> function(details)

，它在

@update:selected

发生之前触发，“on”选择（或取消选择），并且在反映所选行之前。

目前我使用

@update:selected

活动实现了我的目标，但我相信如果在

@selection

上完成会更有意义

这个想法是，当我使用“全选”复选框（位于表标题上）选择行时，我需要取消选择由于给定规则而不应选择的行。单独而言，我只是根据我的条件使用

disable

属性禁用了每一行的复选框。

举例来说，每个

row

都有一个属性

status

，我不想允许选择具有状态

rows

的

"offline"

。要有条件地禁用每一行，我们将有这样的东西：

<template v-slot:body="props">
    <q-tr class="cursor-pointer" :props="props">
        <q-td>
            <q-checkbox v-model="props.selected" :disable="props.row.status === 'offline'"/>
        </q-td>
...

基本上，

:disable="props.row.status === 'offline'"

就可以完成这项工作。但使用“全选”复选框仍会选择所有内容。所以我尝试这样处理：

模板：

<q-table
    ...
    @selection="beforeSelection"
    ...

方法：

beforeSelection(selection) {
    selection.rows = selection.rows.filter(r => r.status != 'offline')
    selection.keys = selection.rows.map(r => r.id) // `id` is the `row-key` I had set.
    console.log(selection) // a simple log confirms we modified the seleted rows correctly
}

修改后，我期望过滤的行将只是选定的行。但它似乎不起作用，并且

details

给出的原始

@selection

对象仍然存在。一个简单的

@update:selected ="details => console.log(details)"

确认原始对象仍然存在。我相信在

beforeSelection

上使用

@selection

的目的对于选择行的“验证”阶段更理想，但如果我无法在此事件上有条件地阻止/恢复选择行，则此事件目前似乎毫无用处.

我是否错过了有关如何使用

@selection

事件的任何内容？

Answer 1

您可能正在使用

:selected.sync

内的

q-table

来绑定数据。将其替换为

:selected

应该可以解决您的问题。