如何在 Quasar / Vue 中正确地将自定义表头绑定到数据答案

【问题标题】：How can I Bind a Custom Table Header to the Data correctly in Quasar / Vue如何在 Quasar / Vue 中正确地将自定义表头绑定到数据
【发布时间】：2019-10-20 03:14:06
【问题描述】：

我正在尝试覆盖类星体表中的标准标题。主要是因为我需要一个堆叠的标题（2 行与 colspans/rowspans）。我可以让它看起来正确，但我不能让它表现得像一个正确的表头 - 主要是它不会排序的事实。我已经尝试了几种方法来声明性地绑定它。

<q-table
    :data="data"
    :columns="columns"
    row-key="name" class="col-12">
    <template v-slot:header="props">
      <q-tr :props="props">
          <q-th rowspan="2" >Sku</q-th>
          <q-th rowspan="2">Name</q-th>
          <q-th colspan="3" style="text-align:center">Sales</q-th>
          <q-th rowspan="2" style="text-align:center">Order</q-th>
          <q-th colspan="3" style="text-align:center">Before Order</q-th>
          <q-th colspan="3" style="text-align:center">After Order</q-th>
          <q-th colspan="3" style="text-align:center">Order</q-th>
       </q-tr>
       <q-tr :props="props">
          <q-th>Qty</q-th>
          <q-th>Count</q-th>
          <q-th>Daily</q-th>
          <q-th>Stock</q-th>
          <q-th>Days</q-th>
          <q-th>Date</q-th>
          <q-th>Stock</q-th>
          <q-th>Days</q-th>
          <q-th>Date</q-th>
          <q-th>Price</q-th>
          <q-th>Discount</q-th>
          <q-th>Total</q-th>
       </q-tr>
  </template>
</q-table>

【问题讨论】：

你能分享一下你在“数据”中存储的对象数组吗，这真的有助于解决这个问题
另外请分享样表，想怎么显示..
@chans 这里是一个密码箱codesandbox.io/s/codesandbox-app-2im4s
你的代码在哪个组件中
拿到组件代码后，分享沙箱更新代码

标签： vue.js quasar-framework

【解决方案1】：

重构了代码并添加了 key 和单独的 props 以与 key 'name' 一起传递给每个标题，现在它可以按预期工作

这里的工作代码沙箱：https://codesandbox.io/s/codesandbox-app-edivz

直播页面网址：https://edivz.sse.codesandbox.io/purchase-orders

<q-table
        :data="data"
        :columns="columns"
        row-key="name" class="col-12">
        <template v-slot:header="props">
          <q-tr>
              <q-th :props="props" key="sku" rowspan="2" >Sku</q-th>
              <q-th :props="props" key="name" rowspan="2">Name</q-th>
              <q-th colspan="3" style="text-align:center">Sales</q-th>
              <q-th :props="props" key="Qty" rowspan="2" style="text-align:center">Order</q-th>
              <q-th colspan="3" style="text-align:center">Before Order</q-th>
              <q-th colspan="3" style="text-align:center">After Order</q-th>
              <q-th colspan="3" style="text-align:center">Order</q-th>
           </q-tr>
           <q-tr>
              <q-th :props="props" key="SalesQty">Qty</q-th>
              <q-th :props="props" key="SalesCount">Count</q-th>
              <q-th :props="props" key="DailySales">Daily</q-th>
              <q-th :props="props" key="BeforeOrderQty">Stock</q-th>
              <q-th :props="props" key="BeforeOrderDays">Days</q-th>
              <q-th :props="props" key="BeforeOrderDate">Date</q-th>
              <q-th :props="props" key="AfterOrderQty">Stock</q-th>
              <q-th :props="props" key="AfterOrderDays">Days</q-th>
              <q-th :props="props" key="AfterOrderDate">Date</q-th>
              <q-th :props="props" key="Price">Price</q-th>
              <q-th :props="props" key="Discount">Discount</q-th>
              <q-th :props="props" key="Total">Total</q-th>
           </q-tr>
      </template>

      </q-table>

【讨论】：