Question

我目前正在使用vue.js构建的表上进行排序功能。我正在对数字进行升序排序。但是，我无法使降序和字母功能正常工作。

这是我在其中调用排序功能的html。目前，我将此作为method（）。

     <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

为您的商品使用计算属性sortedData，并将其放在模板中，而不是convertedData
如果要比较字符串，请使用String.localCompare。
添加一个sortField数据属性。
只需将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个值，则必须做更多的工作来检查类型。

现在很容易对多个字段进行排序。通过更新排序方向数据属性，排序方向也可以是被动的。

如何在vue.js中按字母和数字对表格排序？

1 个答案: