Как отсортировать таблицу в алфавитном и числовом виде в vue.js?

Question

В настоящее время я работаю над функцией сортировки таблицы, созданной с помощью vue.js.У меня есть сортировка по возрастанию в настоящее время работает с числами.Однако я не могу заставить работать по убыванию и в алфавитном порядке.

Вот мой HTML, где я вызываю функцию сортировки.В настоящее время у меня есть это как метод ().

     <tr class="dash-table-mainHead">
              <th 
                v-for="(column, key) in columns"
                :key="key"
                @click="sortTable(column)"
              >{{ column.label }}</th>
            </tr>

Вот JavaScript, где у меня есть мой массив столбцов с соответствующими полями.

  data() {
        return {
            columns: [
                { label: this.$t('reporting.source'), field: 'source' },
                { label: this.$t('reporting.accountsWithActivity'), field: 'accountsWithActivity', align: 'center', type: 'icon' },
                { label: this.$t('reporting.answerableConversations'), field: 'answerableConversations', type: 'boolean', align: 'center' },
                { label: this.$t('reporting.interactiveConversations'), field: 'interactiveConversations', type: 'boolean', align: 'center' },
                { label: this.$t('reporting.leads'), field: 'leads', align: 'center' },
                { label: this.$t('reporting.interactiveLeadConversations'), field: 'leads', type: 'date' },
                { field: 'blank' },
            ],

            convertedData: [],
            // currentSort: 'name',
            currentSortDir: 'asc',

        }
    },

И, наконец, мой метод, где я нахожусьделать сортировку.В настоящее время это работает только по возрастанию и не сортируется по алфавиту.

methods: { sortTable(column) {
            console.log(column.field)
            let sortedData = [];

            sortedData = this.convertedData.sort((a, b) => {
                if (a[column.field] < b[column.field]) { return -1; }
                if (a[column.field] > b[column.field]) { return 1; }
                return 0;
            })
            }
        }

Answer 1

1. Используйте вычисленное свойство sortedData для своих элементов и поместите его в свой шаблон вместо convertedData
2. При сравнении строк используйте String.localCompare.
3. ДобавитьsortField свойство data.
4. Просто установите sortField в null или значение поля, по которому вы щелкнули, чтобы волшебство произошло.

@click="sortField=column.field"

let component = {
  data() {
    return {
      // convertedData: ...
      sortField: null,
      currentSortDir = 'asc'
    }
  },
  computed: {
    sortedData() {
      if (this.sortField === null) {
        return this.convertedData;
      }
      return this.convertedData.sort((a, b) => {
        let res;
        if (typeof a[this.sortField] === 'string') {
          res = a[this.sortField].localeCompare(b[this.sortField])
        } else {
          res = a[this.sortField] > b[this.sortField] ? 1 :
            a[this.sortField] < b[this.sortField] ? -1 : 0
        }
        if (this.currentSortDir !== 'asc') {
          ret = ret * -1;
        }
        return ret
      })
    }
  }
}

Если у вас есть значения null/undefined, вам придется проделать дополнительную работу по проверке типов.

Теперь сортировать несколько полей очень легко.И направление сортировки также может быть реактивным, просто обновляя свойство данных направления сортировки.