Vue.js Vue/Vuetify数据表OData支持

我有一些支持odata的端点，我希望将它们连接到vue中的数据表，并让它们自动支持服务器端排序、筛选和分页。Telerik的Kendo UI中的网格支持odata，您可以告诉组件数据源类型是odata，并且它会自动“正常工作”（），因为odata是一个定义良好的标准

我想知道其他常见的特定于vue的UI框架（如vuetify）是否支持odata。我专门研究了vuetify，它似乎确实支持服务器端操作，但我不清楚为了使用odata需要编写多少自定义逻辑，因为我还没有找到任何具体的示例

下面是上面链接的示例中的源代码，它显示了在没有任何其他样板逻辑的情况下，如何进行反向连接：

        $(document).ready(function() {
            $("#grid").kendoGrid({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                    },
                    schema: {
                        model: {
                            fields: {
                                OrderID: { type: "number" },
                                Freight: { type: "number" },
                                ShipName: { type: "string" },
                                OrderDate: { type: "date" },
                                ShipCity: { type: "string" }
                            }
                        }
                    },
                    pageSize: 20,
                    serverPaging: true,
                    serverFiltering: true,
                    serverSorting: true
                },
                height: 550,
                filterable: true,
                sortable: true,
                pageable: true,
                columns: [{
                        field:"OrderID",
                        filterable: false
                    },
                    "Freight",
                    {
                        field: "OrderDate",
                        title: "Order Date",
                        format: "{0:MM/dd/yyyy}"
                    }, {
                        field: "ShipName",
                        title: "Ship Name"
                    }, {
                        field: "ShipCity",
                        title: "Ship City"
                    }
                ]
            });
        });

---

Vuetify似乎还不支持odata，所以最好的选择可能是编写客户端js解决方案

可能是用其中一个

---

看起来很简单。

这可能有用，也可能没用，但剑道UI确实有一个。我认为Vuetify还没有odata的支持。是的，对不起。。。我应该在原始帖子中指出，但我将向当前使用vuetify的现有vue应用程序添加功能。我希望避免仅仅为了使用一个组件而添加一个全新的UI框架，比如剑道UI。我们还希望和其他表（这些表调用不支持odata的RESTAPI，并在客户端执行所有排序、筛选和分页）具有视觉上的一致性，它们使用vuetify数据表。我明白了。我在下面添加了一个答案，并对如何使用库提出了建议，使之尽可能简单。