QDataTable quasar-framework vue-js的动态选择方法答案

【问题标题】：Dynamic Selection Method of QDataTable quasar-framework vue-jsQDataTable quasar-framework vue-js的动态选择方法
【发布时间】：2018-03-25 21:03:57
【问题描述】：

我在 v-for 中有一个可折叠列表，里面有一个 QDataTable 组件，如下所示。

<q-collapsible :label="req.label" v-for="(req, index) in requisitions" :key="index" class="collapsible-no-padding requisitionContainer" @open="openRequisition('Requisition' + req.reqId)" @close="closeRequisition('Requisition' + req.reqId)" :id='"Requisition" + req.reqId'>
  <q-list>
    <q-item link class='ordersContainer'>
      <q-item-main>
        <q-data-table
          :data="req.filteredOrdersList"
          :config="orderConfigs"
          :columns="orderColumns"
          @selection="selectOrders">
        </q-data-table>
      </q-item-main>
    </q-item>
  </q-list>
</q-collapsible>

看起来像这样

但是，由于有多个表，如果在任何表上进行选择，它确实会使用所选项目调用选择方法，但我无法确定它是哪个表的一部分。当删除选择时，这是一个问题，并且您返回一个空数组，我需要区分每个表选择事件。有什么办法吗？

【问题讨论】：

为什么不将req 传递给selectOrders 方法？
是的，已经试过了。因此，事件处理程序将所选项目列表作为参数传递给 selectOrders。如果我添加一个参数 req，它会覆盖默认处理程序，我只会在 selectOrders 中获得 req 而不是选定的列表。

标签： vue.js quasar-framework

【解决方案1】：

您可以将对req 对象的引用传递给@selection 处理程序中的方法。

由于您还需要对当前隐式传递给selectOrder 方法的选定项数组的引用，因此您现在需要显式传递该值。通常，您可以通过可内联访问的 $event 变量来做到这一点。

然而，与the documentation 不同，<q-data-table> 组件的selection 事件发出两个变量：所选项目数组中元素的计数，以及所选项目数组本身，按此顺序。

要获得对选定项目数组的引用，您需要访问通过arguments[1] 发出的第二个参数：

@selection="selectOrders(arguments[1], req)"

【讨论】：

似乎有效，只是一件事。因此选择处理程序使用 2 个参数（count_selection、selection_array）调用该方法。在 $event 之后添加什么作为第二个属性？
我不确定你的意思。只有selection 数组被传递，而不是计数。 quasar-framework.org/components/datatable.html#Vue-Events。如果您想要 selection 数组的长度，只需在您的方法中执行 selection.length。
如果您调用示例中的方法，则不应如此。再说一次，你为什么需要计数，因为你可以简单地做selection.length？
我知道是对的，但是只需将“selectOrders”放在@selection 中就会调用带有这些参数的方法
在放置 @selection="selectOrders($event, ref)" 这就是我在 selectOrders 方法中得到的。 ibb.co/fUHoAb