Динамически загружать данные при расширении строки

Первый раз задаю вопрос здесь, извините за все, что не так, но здесь ничего не происходит:

Контекст:

У меня есть события модели данных, которые содержат массив строк типа. Этот массив содержит поля 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, которую я использую.

0 ответов

Другие вопросы по тегам