Как я могу правильно привязать пользовательский заголовок таблицы к данным в Quasar / Vue
Я пытаюсь переопределить стандартные заголовки в таблице квазаров . В основном потому, что мне нужен штабелированный Заголовок ( 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>
У вопроса есть решение - Посмотреть?

Не могли бы вы поделиться массивом объектов, которые вы храните в "данных", что действительно поможет решить эту проблему
Источник

Также, пожалуйста, поделитесь образец таблицы, как хотите, чтобы отобразить..
Источник

@Чанс вот codesandbox codesandbox.Ио/с/codesandbox-приложения-2im4s
Источник

Ваш код находится в каком компоненте
Источник

В got the component code, я поделюсь с вами обновленным кодом в песочнице
Источник

Спасибо @chans-фактическая страница 2im4s.sse.codesandbox.io/purchase-orders
Источник

Спасибо за обновление, проверьте ниже Ответ, он работает так, как ожидалось..
Источник
Ответы - Как я могу правильно привязать пользовательский заголовок таблицы к данным в Quasar / Vue / How can I Bind a Custom Table Header to the Data correctly in Quasar / Vue
Является ответом!

20.10.2019 10:10:18
Переработал код и добавил ключ и отдельные реквизиты для передачи каждому заголовку вместе с ключом "name", теперь он работает так, как ожидалось
Рабочий код песочницы здесь: https://codesandbox.io/s/codesandbox-app-edivz
Url живой страницы: 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>
Помочь в развитии проекта: