Kendo UI + Vue - Chrome 中稳定的排序组

Question

我正在为 Kendo UI 使用 Vue 包装器，但无法在 Chrome 中进行排序。 我正在尝试将我的数据分组到站点中，并按这些站点中的类别对行进行排序。 我在 Vue 中的第一列是隐藏的，带有类别索引以对其进行排序：

<kendo-grid-column field="___categorySortingIndex" :hidden="true"></kendo-grid-column>

如果我没有在我的数据源上启用分组，那么它会按预期在索引号之后对所有类别进行排序。

我正在处理的问题仅在对项目进行分组时出现：

group: {
    field: "___siteSortingIndex",
    dir: "asc"
}

There is a tutorial on it using Kendo jQuery 但该功能似乎不适用于 vue 组件，因为 vue 使用模板语法而不是像 jQuery 示例那样的对象数组。

jQuery教程解决方案：

...
columns: [{
      field: "Name"
    }, {
      field: "Address",
      sortable: {
        compare: function(a, b, descending) {
          if(a.Address !== b.Address)
          {
            return a.Address - b.Address;
          }

          if (descending) {
            return b._position - a._position;
          } else {
            return a._position - b._position;
          }
        }
      }
    }]
...

尝试在 Vue 中实现：

<kendo-grid-colum :sortable="sortableObject" ...>

...
sortableObject = {
    compare: ( a, b, descending ) => {
        ...
    }
};
...

将 sortable 属性设置为对象会给出以下警告：

[Vue 警告]：无效的道具：道具“可排序”的类型检查失败。预期布尔值，得到对象。

有没有办法使用 vue 包装器对 kendo ui 进行稳定的 chrome 排序？

Answer 1

我通过监听@databinding 事件解决了这个问题：

<kendo-grid ... @databinding="onDataBinding" ...>

此事件在模板渲染之前运行，然后可以在将数据用于 kendo vue 模板之前对其进行排序：

onDataBinding( e ) {
    forEach( e.items, item => {
        item.items.sort( ( a, b ) => a.___categorySortingIndex - b.___categorySortingIndex );
    } );
}

我不能说这是否被认为是不好的，但它确实可以满足我的需要。

Answer 2

网格列中的:sortable 属性只接受Boolean 类型。

但是，有一个 :sortableCompare 属性采用 Function，它应该返回一个带有 sortable.compare 的对象，方式与您发布的 jQuery 示例类似。