QDataTable类星体框架的动态选择方法vue-js

Question

我有一个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>

看起来像这样

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

Answer 1

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

由于您还需要对当前隐式传递给selectOrder方法的所选项目数组的引用，您现在需要显式传递该值。通常情况下，您可以通过内联可访问的$event变量来执行此操作。

但是，与the documentation相反，<q-data-table>组件的selection事件会发出两个变量：所选项目数组中的元素数量，以及数组所选项目本身，按此顺序。

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

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