Telerik VueJS 网格过滤抛出错误答案

【问题标题】：telerik VueJS grid filtering throwing errorTelerik VueJS 网格过滤抛出错误
【发布时间】：2019-10-21 04:01:45
【问题描述】：

我正在尝试实现 vuejs (native) 网格过滤，并在尝试清除设置过滤器时收到以下错误：

   [Vue warn]: Error in v-on handler: "RangeError: invalid array length"

  found in

  ---> <GridFilterCell>
        <FilterRow>
         <HeaderRow>
           <Header>
             <Grid>
               <Reports3> at src/components/Reports3.vue
                 <Target> at src/components/Target.vue
                   <App> at src/App.vue
                     <Root> vue.runtime.esm.js:619


  RangeError: "invalid array length"
     node_modules FilterRow.js:51
     node_modules FilterRow.js:115
     node_modules FilterRow.js:150
    VueJS 4
     node_modules GridFilterCell.js:258
     node_modules GridFilterCell.js:229
     node_modules GridFilterCell.js:164
  VueJS 3
   vue.runtime.esm.js:1888

网格定义：

  <Grid :style="{height: '450px'}"
              :data-items="reports"
              :sortable="true"
              :sort="sort"
              :filterable="true"
              :filter="filter"
              :filter-cell-render="filterRender"
              :pageable="true"
              :skip="skip"
              :take="take"
              :total="totalRecords"
              :columns="columns"
              @filterchange="filterChange"
              @sortchange="sortChangeHandler"
              @pagechange="pageChangeHandler">}
  </Grid>

data() 过滤方法：

  data(){
    return{
          filter: {
            logic: "and",
            filters: [
               { field: "institutionId", operator: "neq", value: 0 },
               { field: "typeCode", operator: "neq", value: "" },
               { field: "name", operator: "neq", value: "" }
           ]
         },
         filterChange: function (e) {
           this.filter = e.filter;
         },
         filterRender: function (h, defaultRendering, props, change) {
         return defaultRendering;
       }
     }
  }

这是我用作参考的 Telerik 文档页面： https://www.telerik.com/kendo-vue-ui/components/grid-native/filtering/

【问题讨论】：

标签： vue.js kendo-ui telerik

【解决方案1】：

我遇到了同样的问题。由于 Telerik Vue 网格（本机）仍被认为是测试版，我认为仍然存在一些类似这样的错误。

在 Telerik 团队修复之前，这是一种解决方法。

在您的项目文件夹中转到：
node_modules@progress\kendo-vue-grid\dist\es\header\FilterRow.js

找到这一行：
this.$emit.apply(this, __spreadArrays(['filterchange', filtersResult], e));

用这一行替换它：
this.$emit.apply(this, ['filterchange', filtersResult, e]);

你应该准备好了。

我认为__spreadArrays 是一个 TypeScript (3.6) 命令，可能在 FilterRow.js 中放错了位置。这似乎没有必要，因为对象filterchange、filtersResult 和e 本身就是定义而不是数组。您可以通过调试来检查它。请记住，telerik 网格版本的任何更新都将迫使您再次查找并更改代码行，直到错误得到解决。

希望对你有帮助。

【讨论】：

谢谢！这有助于克服错误，但过滤器仍然无法正常工作。
很遗憾听到这个消息。现在这是我遇到的唯一错误。一切都在按预期工作（甚至过滤器）。我承认，有时落后于预期用途有点费时。但是一旦我得到它，它就证明是一个非常方便的工具，可以满足我在复杂场景中的需求。

【解决方案2】：

这确实是 Kendo Vue Grid 中的一个错误，针对该问题的修复刚刚在 Kendo Vue Grid 0.3.7 版中发布。如果您发现其他问题，请通过 https://www.telerik.com/support/kendo-ui 告知我们或将问题记录在我们的公共存储库 - https://github.com/telerik/kendo-vue。

您好，普拉门

【讨论】：