Question

我有绑定到表中输入元素的数据列表。单击表头后，数据列表将按asc或desc排序。现在问题出在例如：当用户在desc中对“名称”列进行排序，并且他想在键入“ D”后立即将第一行名称从“李连杰”更改为“戴夫”时，列表就会进行排序。我可以实现什么以使排序等待用户键入，一旦他完成操作，他就可以再次单击标题并对数据进行排序。问题gif：Check issue here

我的提琴手示例：https://jsfiddle.net/bngp6oas/1/

 filteredData: function () {
      var sortKey = this.sortKey
      var filterKey = this.filterKey && this.filterKey.toLowerCase()
      var order = this.sortOrders[sortKey] || 1
      var data = this.data
      if (filterKey) {
        data = data.filter(function (row) {
          return Object.keys(row).some(function (key) {
            return String(row[key]).toLowerCase().indexOf(filterKey) > -1
          })
        })
      }
      if (sortKey) {
        data = data.slice().sort(function (a, b) {
          a = a[sortKey]
          b = b[sortKey]
          return (a === b ? 0 : a > b ? 1 : -1) * order
        })
      }
      return data
    }
  }

Answer 1

您可以使用.lazy modifier。为了正常工作，您还需要向每行添加唯一的key。

使用键更新网格数据：

gridData: [
    { id: 1234 , name: 'Chuck Norris', power: Infinity },
    { id: 2345, name: 'Bruce Lee', power: 9000 },
    { id: 3456, name: 'Jackie Chan', power: 7000 },
    { id: 4567, name: 'Jet Li', power: 8000 }
 ]

查看更新的小提琴here

Answer 2

您可以使用.lazy模型修饰符仅在输入失去焦点之后才更新值（并因此进行排序）。

在小提琴中的代码如下：

<input type="text" v-model.lazy="entry[key]" />

在此处查看Vue文档：https://vuejs.org/v2/guide/forms.html#lazy

用户输入数据时VueJS禁用排序

2 个答案: