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 网格（原生）仍被认为是测试版，我认为仍然存在一些像这样的错误。

在 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 网格版本的更新都将迫使您再次查找并更改代码行，直到错误得到解决。

希望对您有所帮助。

Answer 2

这确实是 Kendo Vue Grid 中的一个错误，针对该问题的修复刚刚在 Kendo Vue Grid 的 0.3.7 版中发布。如果您发现其他问题，请通过 https://www.telerik.com/support/kendo-ui or log the issues in our public repository - https://github.com/telerik/kendo-vue.

告诉我们

您好，普拉门

telerik VueJS 网格过滤抛出错误

telerik VueJS grid filtering throwing error

vue.js

kendo-ui

telerik