解决ag-grid-vue中postSortRows结合lodash sortBy无法实现自定义状态排序的问题

你遇到的问题其实和_.sortBy是否异步完全无关——ag-grid的postSortRows要求你直接修改传入的rowNodes数组本身，而不是重新赋值一个新数组。

_.sortBy的特性是返回一个新的排序后的数组，你代码里的rowNodes = _.sortBy(...)只是把局部变量指向了新数组，并没有改变params.nodes这个原数组的内容。ag-grid内部是基于原数组的变化来更新表格的，所以自然不会生效。而官方示例里的splice操作是直接在原rowNodes数组上进行修改，所以能被ag-grid正确识别。

你只需要把_.sortBy返回的新数组内容替换到原数组中，而不是重新赋值变量。这里有两种可行的方式：

方法一：修改原数组内容（推荐） #

先通过_.sortBy得到排序后的新数组，然后清空原数组并把新数组的元素添加进去，这样原数组的引用不变，但内容已经是排序后的结果：

created() { 
  this.postSortRows = (params) => { 
    const rowNodes = params.nodes; 
    const order = ['Atrasado', 'Pendente', 'Pronto', 'Entregue']; 
    // 得到排序后的新数组
    const sortedRows = _.sortBy(rowNodes, obj => _.indexOf(order, obj.data.status));
    // 清空原数组，再把新数组元素全部加进去
    rowNodes.splice(0, rowNodes.length, ...sortedRows);
  } 
}

方法二：直接使用原生数组的sort方法（无需lodash） #

如果不想额外依赖lodash，也可以直接用原生的Array.sort方法，它会直接修改原数组：

created() { 
  this.postSortRows = (params) => { 
    const rowNodes = params.nodes; 
    const order = ['Atrasado', 'Pendente', 'Pronto', 'Entregue']; 
    rowNodes.sort((a, b) => {
      const indexA = order.indexOf(a.data.status);
      const indexB = order.indexOf(b.data.status);
      return indexA - indexB;
    });
  } 
}

为什么官方示例有效？ #

官方代码里的splice操作是直接在原rowNodes数组上进行元素的移动，整个过程中数组的引用没有改变，只是内部元素的顺序被调整了，所以ag-grid能够检测到这个变化并更新表格的显示。

内容的提问来源于stack exchange，提问作者Guilherme Souza