QDataTable动态选择方法 quasar-framework 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>

看起来像这样

但是，由于有多个table，如果对table中的任何一个进行选择，它确实调用了选择项的选择方法，但我没有告诉 table 它是哪个的一部分的方法。这是一个问题，当一个选择被删除并且你返回一个空数组时，我需要区分每个 tables 选择事件。有办法吗？

Answer 1

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

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

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

要获取对所选项目数组的引用，您需要访问通过 arguments[1]:

发出的第二个参数

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

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

Dynamic Selection Method of QDataTable quasar-framework vue-js

vue.js

quasar-framework