javascript - 如何在 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 数据属性。
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 值，您将不得不做更多的工作来检查类型。

现在可以很容易地对多个字段进行排序。排序方向也可以通过更新排序方向数据属性来响应。