1

Пропсами прилетает массив с данными и массив с названием колонок, нужно сделать функционал чтобы при нажатии на название колонки таблица сортировалась в зависимости от нажатой колонки. Проблема в том, что нам постоянно прилетают разные названия колонок и разные данные, поэтому нужно сделать функцию адаптивной под разные колонки

<template>
  <table>
    <thead>
      <tr>
        <th
          class="admin-table__input-wrapper"
          v-for="(col, index) in columns"
          :key="index"
        >
          <span 
            @click="[
              col.sortBy && sortBy()
            ]" 
            :class="col.sortBy && 'sortBy'"
          >
            {{ col.label }}
          </span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr
        ref="tableRow"
        class="table__row"
        v-for="(el, index) in data"
        :key="index"
      >
        <td class="body-3" v-for="(col, index) in columns" :key="index">
          {{ el[col.field] }}
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: "AdminTable",
  layout: "admin",
  props: {
    columns: {
      type: Array,
      required: true,
    },
    data: {
      type: Array,
      required: true,
    },
  },
  methods: {
    sortBy() {
      this.columns.forEach((col) => {
        this.data.sort((a, b) => {
          return a[col.field].localeCompare(b[col.field]); // Попытка сделать адаптивность под любые поля
        });
      });
      // this.data.sort((a, b) => { Рабочий вариант, но сортировка работает только по полю fullname
      //   return a.fullname.localeCompare(b.fullname);
      // });
    },
  },
};
</script>

Компонента с которой прилетают данные:

<template>
  <div class="card">
    <div class="card-body p-0">
      <AdminTable :columns="columns" :data="trainers"/>
    </div>
  </div>
</template>

<script>
import AdminTable from "@/components/sections/admin-table";

export default {
  layout: "admin",
  components: {
    AdminTable,
  },
  data() {
    return {
      trainers: [
        {
          id: 1312,
          fullname: "Paris Stanley",
          email: "[email protected]",
        },
        {
          id: 1421,
          fullname: "Layne Hensley",
          email: "[email protected]",
        },
      ],
      columns: [
        {
          field: "id",
          label: "Id",
          search: true,
          sortBy: true,
        },
        {
          field: "fullname",
          label: "Full Name",
          search: true,
          sortBy: true,
        },
        {
          field: "email",
          label: "Email",
          search: true,
          sortBy: true,
        },
      ],
    };
  },
};
</script>

1
  • Передайте в метод индекс колонки и сортируйте
    – Dmytro
    28 янв 2021 в 17:02

1 ответ 1

1
  1. Не правильно сортировать данные внутри компонента таблицы. Вы изменяете props, что само по себе запрещено во Vue. Соответственно логика сортировки должна быть на уровень выше, а компонент таблицы максимум что может делать - сообщать о нужде в сортировке. Таким образом это будет самостоятельный компонент который можно будет легко переиспользовать с разной логикой сортировки. Почитайте о принципе инверсии зависимостей.

  2. Как следствие с первого пункта, компонент таблицы будет сообщать по какому полю нужно сортировать. $emit('update:sort', col.field)

  3. Компонент вышестоящий будет принимать @update:sort="sortBy" и в методе будет итерация по нужному полю

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.