telerik VueJS网格过滤抛出错误

Question

我正在尝试实现vuejs（本机）网格过滤，并在尝试清除设置的过滤器时收到以下错误：

   [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/

Answer 1

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

这里是一种变通方法，直到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是definitley而不是数组本身。您可以通过调试进行检查。请记住，对Tel​​erik网格版本的任何更新都将迫使您再次查找并更改代码行，直到解决了该错误为止。

希望有帮助。

Answer 2

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

问候，普拉门