Динамически загружать данные при расширении строки
Первый раз задаю вопрос здесь, извините за все, что не так, но здесь ничего не происходит:
Контекст:
У меня есть события модели данных, которые содержат массив строк типа. Этот массив содержит поля document _id, ссылающиеся на документы типа service, т.е. событие может иметь множество различных услуг, которые оно предоставляет.
event.js:
let eventSchema = new Schema({
/*Other fields*/
services: {
type: [String] //Stores service document IDs
},
});
/*export model*/
Бэкэнд этого приложения работает нормально - есть конечная точка для возврата списка сервисов на основе поля событий 'services', которое мы можем вызвать с помощью axios:
let apiUrl = ".../endpoint"
axios.get(apiUrl).etc...
И вернет данные в формате JSON как таковые:
[
{
"_id": "615ac13f5389f3275359f3a0",
"serviceName": "Hello World!",
"description": "Just Testing!",
"__v": 0
},
//etc
]
Проблема
Во внешнем интерфейсе приложения я хочу отображать все события в таблице, а затем иметь расширяемую подтаблицу для каждой записи в этой таблице, которая отображает отдельные службы событий. Я получил расширяемую таблицу для работы, но мне не удается найти способ динамически загружать данные для каждой подтаблицы каждого события. Я обнаружил, что могу вызвать функцию
getServicesByEvent()
при расширении строки с помощью
@expand-change
как атрибут
<el-table>
, но мне нужно было бы каким-то образом передать идентификатор события в эту функцию, чтобы получить службы, принадлежащие расширенной строке, а затем каким-то образом загрузить возвращенные данные в
servicesData
массив, чтобы его можно было соответствующим образом отобразить.
Вот код компонента vue, к которому это относится:
EventTable.vue - Шаблон
<template>
<section class="event-section">
<h2>Events</h2>
<el-container class="table-container" >
<el-main class="main-table-container">
<el-table :data="eventsData.filter((data) => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
class="main-table" max-height="500" :default-sort="{prop: 'date', order: 'descending'}" @expand-change="getServicesByEvent">
<el-table-column type="expand">
<el-table :data="servicesData" style="padding-left: 45px">
<el-table-column prop="serviceName" label="Service(s)"></el-table-column>
</el-table>
</el-table-column>
<el-table-column prop="date" label="Date" sortable :formatter="dateFormatter"></el-table-column>
<el-table-column label="Event Info" class="column">
<el-table-column prop="name" label="Event Name"></el-table-column>
<el-table-column prop="location" label="Location"></el-table-column>
</el-table-column>
<el-table-column align="right">
<template #header>
<el-input v-model="search" size="mini" placeholder="Type to search"/>
</template>
<template #default="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)"> Edit </el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
</template>
</el-table-column>
</el-table>
</el-main>
</el-container>
</section>
</template>
EventTable.vue - Скрипт
<script>
import axios from "axios";
export default {
data() {
return {
eventsData: [],
search: ''
}
},
created() {
this.getEvents()
//this.getServices(); //This would populate the subtables each with all records of services
//this.getServicesByEvent(1) //Whereas this would populate the subtables with records of one events' services.
//This ^ is close to what I want, but I cannot figure out how to pass an id corresponding to the expanded table row.
},
methods: {
getEvents() {
let apiUrl = "/events/find-all"
axios.get(apiUrl).then(res => {
this.eventsData = res.data
}).catch(error => {
console.log(error)
});
},
getServices() {
let apiUrl = "/service/find-all"
axios.get(apiUrl).then(res => {
this.servicesData = res.data
}).catch(error => {
console.log(error)
});
},
getServicesByEvent(row) {
let apiUrl = "/event/services/find-all/" + row.id
axios.get(apiUrl).then(res => {
this.servicesData = res.data
}).catch(error => {
console.log(error)
})
}
/* And others */
}
}
</script>
Любая помощь будет очень признательна, поскольку я пытался найти решение этой проблемы в течение пары дней, и документация element-plus, как оказалось, не очень помогает. Я приложил все усилия, чтобы включить всю необходимую информацию, но дайте мне знать, если что-то я пропустил. Также, на всякий случай, вот ссылка на библиотеку компонентов element-plus, которую я использую.