Таблица BootstrapVue: сортировка по дате и по строке? - PullRequest
Новая
       80

Таблица BootstrapVue: сортировка по дате и по строке?

0 голосов
/ 03 июня 2019

Я довольно новичок в VueJS и в настоящее время использую BootstrapVue (последняя версия, v2.0.0), в основном его функцию b-table.Я загружаю элементы таблицы динамически (из файла JSON), и одно из моих полей (столбцов) является строкой, а другое - форматированной датой (дд / мм / гггг).Я хотел бы иметь возможность сортировать эти даты, как другие строковые или числовые поля.В документе упоминается возможность для создания пользовательской функции сортировки , поэтому я написал одну (как глобальную функцию, используя моментов.js, как было предложено): 

function sortDate(a, b, key) {
  aDate = moment(a[key], 'DD/MM/YYYY')
  bDate = moment(b[key], 'DD/MM/YYYY')
  if (aDate.isValid && bDate.isValid) {
    if (aDate < bDate) {
      return -1
    }
    else if (aDate > bDate) {
      return 1
    }
    else {
      return 0
    }
  }
  return null
}

Затем я интегрировал ее в HTMLb-таблица с использованием тега: sort-compare: 

<b-table id="bh_table" :items="items" :fields="fields" :sort-compare="sortDate"></b-table>

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

Кажется, что здесь нужно сделать, но я думаю, что это довольно нелогично, получать возможные дубликаты (у меня есть другая таблицасодержит число и даты, только даты и т. д.)

1 Ответ

0 голосов
/ 17 июля 2019

Вы не проверяете, по какому ключу сортируется.Также обратите внимание, что a и b являются данными всей строки. 

function sortDate(a, b, key) {
  if (key !== 'myDateField') {
    // `key` is not the field that is a date.
    // Let b-table handle the sorting for other columns
    // returning null or false will tell b-table to fall back to it's
    // internal sort compare routine for fields keys other than `myDateField`
    return null // or false
  }
  aDate = moment(a[key], 'DD/MM/YYYY')
  bDate = moment(b[key], 'DD/MM/YYYY')
  if (aDate.isValid && bDate.isValid) {
    if (aDate < bDate) {
      return -1
    }
    else if (aDate > bDate) {
      return 1
    }
    else {
      return 0
    }
  }
  return null
}
...