Сортировка таблиц Vue.js (HTML & Buefy)

Question

Я использую Vue.js в текущем проекте.Ситуация такова: почти все таблицы используют Buefy и имеют встроенную сортировку (пример ниже).Я думаю, что это самый простой способ сделать это.Документация здесь: https://buefy.github.io/documentation/table

<template>
    <section>
        <b-table default-sort="user.first_name">
            <template slot-scope="props">
                <b-table-column field="id" label="ID" sortable>
                </b-table-column>

                <b-table-column field="user.first_name" label="First Name">                   </b-table-column>

                <b-table-column field="user.last_name" label="Last Name">
                </b-table-column>

                <b-table-column field="date" label="Date">
                </b-table-column>
            </template>
        </b-table>
    </section>
</template>

Затем в проекте есть один компонент, который выполнен в виде обычной таблицы HTML (пример ниже).Строки данных таблицы отображаются внутри этого компонента Slot.

<template>
  <table class="classname">
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
    </thead>
    <tbody>
      <slot></slot>
    </tbody>
  </table>
</template>

Родительский компонент приведенного выше примера выглядит примерно так (examplecomponent - это имя компонента, из которого генерируется таблица HTML):

<div class="grid">
  <examplecomponent :class="exampleclass">
    <template v-for="(row, index) in filteredList">
      <othercomponent></othercomponent>
      <othercomponenttwo></othercomponenttwo>
    </template>
  </examplecomponent>
</div>

Итак, вопрос в том, каков самый простой / лучший способ сортировки данных в этой ситуации?Я пытался изменить таблицу HTML, чтобы использовать b-таблицу Buefy, но она не работает хорошо.Я предполагаю, что элементы родительского компонента тоже должны быть изменены.Там нет импорта в .vue, где находится HTML-таблица, но у родителя есть весь доступ к необходимой информации.

Я немного запутался и совсем новичок как программист, поэтому я 'был бы счастлив, если бы кто-то мог помочь мне и объяснить все подробно, как если бы вы рассказали 5-летнему ребенку.

Answer 1

Я сам решил свой собственный вопрос, но это заняло некоторое время.

Самый простой способ - создать элемент click in (например, место с обычной HTML-таблицей, дочерний компонент):

<template>
  <table>
    <tr>
      <th @click="$emit('sort', {column: 'Name', isAsc: !isAsc})">Name</th>
      <th> ... </th>
    </tr>
  </table>
</template>

props: {
  isAsc: Boolean,
  sortedBy: String
}

И что-то подобное будет вставлено в родительский компонент:

<child-component-name @sort="sortTable" :sortedBy="sortedBy" :isAsc="isAsc" v-if="yourTableSummary"> ... </child-component-name>

components: {
  'child-component-name': NameOfYourComponent
},

data() {
    return {
        isAsc: true,
        sortedBy: 'Name'
        yourTableSummary: {}
    }
},

methods: {
    sortTable({column, isAsc}) {
        // Set isAsc to default if sorted column changes
        if (column != this.sortedBy) {
            isAsc = true
        }

        let sortedList = []
        if (isAsc) {
            sortedList =
                this.yourTableSummary.Rows.sort((a, b) => {
                    return a[column].localeCompare(b[column])
                })
        } else {
            sortedList =
                this.yourTableSummary.Rows.sort((a, b) => {
                    return (a[column].localeCompare(b[column]) * -1 )
                })
        }

        this.yourTableSummary.Rows = [...sortedList]
        this.sortedBy = column
        this.isAsc = isAsc
    },
}