Vue.js orderBy不能正确使用大写和小写

Vue.js orderBy does not work properly with uppercase and lowercase

本文关键字：js orderBy 不能 Vue      更新时间：2023-11-02

我正在使用Laravel 5.2+Vuejs+Vueify开发一个应用程序，我在表上列出了一个对象数组，但我有两个问题。

1.orderBy以大写和小写分隔的形式工作

orderBy正在应用带分隔符的记录，其中第一个字母是大写和小写！

2.过滤字段上的特殊字符

在筛选字段中键入"Água"找不到"Agua"结果，因为字母A上有尖锐的重音，我想忽略重音。。。这可能吗？

JS文件

Vue.filter('pmlOrderBy', function(arr, sortKey, reverse) {
  if (!sortKey) {
    return arr;
  }
  var order = (reverse && reverse < 0) ? -1 : 1;
  // sort on a copy to avoid mutating original array
  return arr.slice().sort(function(a, b) {
    if (sortKey !== '$key') {
      if (Vue.util.isObject(a) && '$value' in a) a = a.$value;
      if (Vue.util.isObject(b) && '$value' in b) b = b.$value;
    }
    a = Vue.util.isObject(a) ? Vue.parsers.path.getPath(a, sortKey) : a;
    b = Vue.util.isObject(b) ? Vue.parsers.path.getPath(b, sortKey) : b;
    a = a.toLowerCase();
    b = b.toLowerCase();
    //         return a.localeCompare(b) * order;
    return a === b ? 0 : a > b ? order : -order;
  });
});

new Vue({
  el: 'body',
  data: {
    record: {},
    selected: [],
    list: [{
      name: 'Google',
      id: 1,
    }, {
      name: 'Água',
      id: 2,
    }, {
      name: 'Agua Branca',
      id: 3,
    }, {
      name: 'first time',
      id: 4,
    }, {
      name: 'boston',
      id: 5,
    }, {
      name: 'Type',
      id: 6,
    }, {
      name: 'Facebook',
      id: 7,
    }, ],
    sortProperty: 'name',
    sortDirection: 1,
  },
  methods: {
    sort: function(property) {
      this.sortProperty = property;
      this.sortDirection = (this.sortDirection == 1) ? -1 : 1;
    },
  }
});

HTML文件

<div class="container">
  <input type="text" v-model="textFilter" class="form-control" placeholder="Type to filter...">
</div>
<hr>
<div class="container">
  <div class="alert alert-info">Click at the TH to sort</div>
  <table class="table table-striped table-bordered">
    <thead>
      <tr>
        <th @click="sort('id')" style="cursor: pointer;">Id</th>
        <th @click="sort('name')" style="cursor: pointer;">Name</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="r in list | filterBy textFilter | pmlOrderBy sortProperty sortDirection">
        <td class="text-center" style="width:90px">{{ r.id }}</td>
        <td>{{ r.name }}</td>
      </tr>
    </tbody>
  </table>
</div>

JS Bin

===编辑======

当泰勒和RainningChain帮助我吼叫时，我们几乎到达了那里！

我发现了这篇文章，并更新了上面的代码和JS Bin，但现在的问题是：

  • 它是正确的排序，但如果我试图排序其他列点击另一个TH，它会刹车
  • 特殊特征的问题仍然存在=/

有人吗？

谢谢！

为了实现这一点，您必须创建自己的过滤器。

扩展Vue的orderBy过滤器，这将是解决这两个问题的功能性解决方案。

// This was originally copied from the Vue source
// File: src/filters/array-filters.js
function orderByWords (arr, sortKey, reverse) {
  arr = convertArray(arr)
  if (!sortKey) {
    return arr
  }
  var order = (reverse && reverse < 0) ? -1 : 1
  // sort on a copy to avoid mutating original array
  return arr.slice().sort(function (a, b) {
    if (sortKey !== '$key') {
      if (isObject(a) && '$value' in a) a = a.$value
      if (isObject(b) && '$value' in b) b = b.$value
    }
    a = isObject(a) ? getPath(a, sortKey) : a
    b = isObject(b) ? getPath(b, sortKey) : b
    return a.localeCompare(b) * order
  })
}

过滤器的核心是以下片段：a.localeCompare(b)

String.prototype.localeCompare方法比较两个字符串，并基于初始字符串（a）是在被比较的字符串（b）之前还是之后返回整数值。

更新

原来过滤器坏了，因为Number.prototype.localeCompare不存在。。。谁知道呢？

所以我们可以使用一个小的类型铸造技巧来让它在任何事情上发挥作用。

Vue.filter('pmlOrderBy', function (arr, sortKey, reverse) {
    if (!sortKey) {
        return arr;
    }
    var order = (reverse && reverse < 0) ? -1 : 1;
    // sort on a copy to avoid mutating original array
    return arr.slice().sort(function (a, b) {
        if (sortKey !== '$key') {
            if (Vue.util.isObject(a) && '$value' in a) a = a.$value;
            if (Vue.util.isObject(b) && '$value' in b) b = b.$value;
        }
        a = Vue.util.isObject(a) ? Vue.parsers.path.getPath(a, sortKey) : a;
        b = Vue.util.isObject(b) ? Vue.parsers.path.getPath(b, sortKey) : b;
        return (''+a).localeCompare((''+b)) * order;
    });
});

关键行是过滤器的最后一行。(''+a).localeCompare会将a强制为String，然后调用localeCompare方法。

相关文章：