Динамическая таблица на element-ul
Есть Vue проект где все элементы на element-ui С сервера получаем Json
{
"events": [
{
"id": "83C05E29-7640-4EF9-B7E5-0D4A6D3CB5D7",
"date": "2021-01-19 16:59:13.097",
"type": "sessionOpened",
"revision": "23580",
"departmentId": "0455A40F-4481-14D7-0172-97D63C6F0010",
"attributes": [],
"session": "33.000000000",
"user": "iiko",
"auth": "iiko",
"manager": "iiko",
"terminal": "Test",
"sessionId": null
},
{
"id": "EEE24C11-B74C-4756-8E73-C07F0CFE1141",
"date": "2021-01-21 12:10:46.160",
"type": "orderOpened",
"revision": "23802",
"departmentId": "0455A40F-4481-14D7-0172-97D63C6F0010",
"attributes": [],
"isBanquet": ".000000000",
"numGuests": "1.000000000",
"openTime": "2021-01-21 12:10:46.147",
"orderNum": "434.000000000",
"orderSumAfterDiscount": ".000000000",
"receiptsSum": ".000000000",
"session": "34.000000000",
"sum": ".000000000",
"tableNum": "601",
"restaurantGroup": "Test",
"orderId": null,
"user": "iiko",
"terminal": "Test",
"waiter": "СИС. АДМИНИСТРАТОР"
},
{
"id": "8F1717A2-5E68-4FB8-B19F-2F573E00E45B",
"date": "2021-01-21 14:03:02.313",
"type": "orderPaid",
"revision": "23871",
"departmentId": "0455A40F-4481-14D7-0172-97D63C6F0010",
"attributes": [],
"changeSum": ".000000000",
"dishes": "Тестовое блюдо1 × 3; Дюшес × 3",
"isBanquet": ".000000000",
"numGuests": "1.000000000",
"openTime": "2021-01-21 14:02:55.410",
"orderNum": "437.000000000",
"orderSumAfterDiscount": "6.600000000",
"prechequeTime": "2021-01-21 14:02:56.123",
"receiptsSum": ".000000000",
"session": "34.000000000",
"sum": "6.600000000",
"sumCard": ".000000000",
"sumCash": "6.600000000",
"sumCredit": ".000000000",
"sumPrepay": ".000000000",
"tableNum": "601",
"cashRegister": "Фискальный регистратор линейки АТОЛ",
"restaurantGroup": "Test",
"terminal": "Test",
"auth": "СИС. АДМИНИСТРАТОР",
"cashier": "СИС. АДМИНИСТРАТОР",
"waiter": "СИС. АДМИНИСТРАТОР",
"orderId": null,
"sessionId": null
}
],
"colums": [
"session",
"isBanquet",
"numGuests",
"openTime",
"orderNum",
"orderSumAfterDiscount",
"receiptsSum",
"sum",
"tableNum",
"changeSum",
"dishes",
"prechequeTime",
"sumCard",
"sumCash",
"sumCredit",
"sumPrepay",
"orderId",
"cashRegister",
"restaurantGroup",
"terminal",
"user",
"auth",
"manager",
"cashier",
"waiter",
"sessionId"
]
}Задача преобразовать это в таблицу с динамическими колонками. То есть как видно мы не знаем сколько атрибутов у каждого события. И нам нужно перебирая не повторяя столбцов складывать все в нужные поля. Как это сделать на обычном html ясно. Но наворачивать Фильтры, Сортировки уж очень не хочется(да и знаний для этого мало)
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Дата и время</th>
<th>Тип события</th>
<th v-for="item in tableData.colums">{{ item }}</th>
</tr>
</thead>
<tbody>
<tr v-for="row in tableData.events">
<td>{{ row.date }}</td>
<td>{{ row.type }}</td>
<td v-for="item in tableData.colums">{{ row[item] }}</td>
</tr>
</tbody>
</table>И весь вопрос как грамотно положить эти данные в елементовскую(elemetn-ul) таблицу.
Описывать все 100+ столбцов в компоненте не вариант
<el-table
:data="tableData.events"
border
size ="mini"
class="custom-header-table-actions"
width="100%"
height="calc(100vh - 230px)"
style="width: 100%; overflow-x: auto">
<!-- <el-table-column v-for="item in tableData.events"-->
<!-- :prop="tableData.events.date"-->
<!-- :label="item"-->
<!-- sortable-->
<!-- width="180">-->
<!-- </el-table-column>-->
<el-table-column prop="date" label="Дата и время" width="180"> </el-table-column>
<el-table-column prop="type" label="Тип события" sortable width="180"> </el-table-column>
</el-table>В Идеале получить на el-table такую таблицу
