Vue.js 如何在Kendo UI Vue网格（本机）中组合过滤、分组和排序

我试图在我的网格上启用一些操作，例如分组、过滤和排序，它们单独工作，如文档中所示，但没有一个例子说明这些功能可以一起工作

我自己能够将排序和过滤结合起来，但当我添加分组时，分组不起作用，如文档中所示。看看我的代码

<template>
  <div>
    <Grid :style="{height: '100%'}"
        ref="grid"
        :data-items="getData"
        :resizable="true"
        :reorderable="true"
        @columnreorder="columnReorder"
        :filterable="true"
        :filter="filter"
        @filterchange="filterChange"
        :sortable="true"
        :sort= "sort"
        @sortchange="sortChangeHandler"
        :groupable="true"
        :group= "group"
        @dataStateChange="dataStateChange"
        :columns="columns">
    </Grid>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        items: [],
        editID: null,
        columns: [
         { field: 'AbsenceEmployeID', filterable:false, editable: false, title: '#'},
         { field: 'Employe', title: 'Employer', cell: DropDownEmployes},
         { field: 'Remarque', title: 'Remarque'},
         { field: 'Type', title: 'Type', cell: DropDownTypes},
         { field: 'CreatedDate', filter:'date', editable: false, editor: 'date', title: 'créé le', format: '{0:d}'},
         { title: 'Actions', filterable:false, cell: CommandCell}
        ],
        filter: {
          logic: "and",
          filters: []
        },
        sort: [
          { field: 'CreatedDate', dir: 'desc' }
        ],
        group: [],
        gridData: []
      }
    }
    mounted() { 
      this.loadItems()
    },
    computed: {
      absencesList() {
        return this.items.map((item) => Object.assign({ inEdit: item.AbsenceEmployeID === this.editID}, item));
     },
     getData() {
       return orderBy(filterBy(this.absencesList, this.filter), this.sort);
     },
     ...mapState({
       absences: state => state.absences.absences
      })
    }
    methods: {
      loadItems () {
        this.$store.dispatch('absences/getAbsences')
          .then(resp => {
            this.items = this.absences.map(item => item)
          })
      },
      filterChange: function(ev) {
       this.filter = ev.filter;
      },
      columnReorder: function(options) {
        this.columns = options.columns;
      },
      sortChangeHandler: function(e) {
        this.sort = e.sort;
      },

      // the following is for grouping but not yet used, read more
      groupedData: function () {
        this.gridData = process(this.getData, {group: this.group});
      },
      createAppState: function(dataState) {
        this.group = dataState.group;
        this.groupedData();
      },
      dataStateChange: function (event) {
        this.createAppState(event.data);
      },
    }
  }
</script>

导出默认值{
数据（）{
返回{
项目：[]，
editID:null，
栏目：[
{字段：“缺席员工ID”，可筛选：false，可编辑：false，标题：'#'，
{字段：'Employe'，标题：'Employer'，单元格：DropDownEmployes}，
{字段：'Remarque'，标题：'Remarque'}，
{字段：'Type'，标题：'Type'，单元格：DropDownTypes}，
{字段：'CreatedDate'，过滤器：'date'，可编辑：false，编辑器：'date'，标题：'créle'，格式：'{0:d}'}，
{title:'Actions'，filterable:false，cell:CommandCell}
],
过滤器：{
逻辑：“和”，
过滤器：[]
},
排序：[
{字段：'CreatedDate'，目录：'desc'}
],
组：[]，
网格数据：[]
}
}
挂载（）{
这是loadItems（）
},
计算：{
缺席名单{
返回this.items.map（（item）=>Object.assign（{inEdit:item.AbsenceEmployeID==this.editID}，item））；
},
getData（）{
returnorderby（filterBy（this.absencesList，this.filter），this.sort）；
},
…地图状态({
缺席：状态=>state.absences.absences
})
}
方法：{
加载项（）{
此.$store.dispatch（'absences/getAbsences'）
。然后（resp=>{
this.items=this.absences.map（item=>item）
})
},
过滤器更换：功能（ev）{
this.filter=ev.filter；
},
columnReorder：函数（选项）{
this.columns=options.columns；
},
sortChangeHandler:函数（e）{
this.sort=e.sort；
},
//以下内容用于分组，但尚未使用，请阅读更多
groupedData:函数（）{
this.gridData=process（this.getData，{group:this.group}）；
},
createAppState:函数（数据状态）{
this.group=dataState.group；
this.groupedData（）；
},
dataStateChange:函数（事件）{
this.createAppState（event.data）；
},
}
}

最后三种方法还没有使用，因此过滤和排序到目前为止工作得很好。然后，为了启用分组，我想将

：data items=“getData”

替换为

：data items=“gridData”

，并在加载项后运行

此.groupedData（）

方法，但分组不起作用。 我认为一切都应该由

dataStateChange

事件和

process（）

函数来处理，但我也尝试过，但没有成功

如果您定义filterchange和sortchange事件，它们将被触发进行筛选和排序，并且您必须在它们的处理程序中更新数据。如果希望对所有更改使用datastatechage事件，则必须删除filterchange和sortchange事件，并且将触发datastatechage事件而不是它们。在这种情况下，您必须更新其处理程序中的数据

您可以使用@progress/kendo data query的处理方法，方法是为每个需要的数据更改传递相应的参数，如下例所示：

const result = process(data, {
    skip: 10,
    take: 20,
    group: [{
      field: 'category.categoryName',
            aggregates: [
                  { aggregate: "sum", field: "unitPrice" },
                  { aggregate: "sum", field: "unitsInStock" }
            ]
      }],
    sort: [{ field: 'productName', dir: 'desc' }],
    filter: {
        logic: "or",
        filters: [
          { field: "discontinued", operator: "eq", value: true },
          { field: "unitPrice", operator: "lt", value: 22 }
        ]
    }
});

Hers是一个stackblitz示例，其中该示例工作正常-

如果您定义了filterchange和sortchange事件，它们将被触发进行筛选和排序，并且您必须更新其处理程序中的数据。如果希望对所有更改使用datastatechage事件，则必须删除filterchange和sortchange事件，并且将触发datastatechage事件而不是它们。在这种情况下，您必须更新其处理程序中的数据

您可以使用@progress/kendo data query的处理方法，方法是为每个需要的数据更改传递相应的参数，如下例所示：

const result = process(data, {
    skip: 10,
    take: 20,
    group: [{
      field: 'category.categoryName',
            aggregates: [
                  { aggregate: "sum", field: "unitPrice" },
                  { aggregate: "sum", field: "unitsInStock" }
            ]
      }],
    sort: [{ field: 'productName', dir: 'desc' }],
    filter: {
        logic: "or",
        filters: [
          { field: "discontinued", operator: "eq", value: true },
          { field: "unitPrice", operator: "lt", value: 22 }
        ]
    }
});

---

Hers是一个stackblitz示例，该示例工作正常-

您需要实现groupchange方法来处理分组

我更喜欢使用@progress/kendo数据查询中的流程

下面是一个完整的例子

<template>
<Grid :style="{height: height}"
      :data-items="gridData"
      :skip="skip"
      :take="take"
      :total="total"
      :pageable="pageable"
      :page-size="pageSize"
      :filterable="true"
      :filter="filter"
      :groupable="true"
      :group="group"
      :sortable="true"
      :sort="sort"
      :columns="columns"
      @sortchange="sortChangeHandler"
      @pagechange="pageChangeHandler"
      @filterchange="filterChangeHandler"
      @groupchange="groupChangeHandler"
/>
</template>

<script>
import '@progress/kendo-theme-default/dist/all.css';
import { Grid } from '@progress/kendo-vue-grid';
import { process } from '@progress/kendo-data-query';

const sampleProducts = [
{
    'ProductID': 1,
    'ProductName': 'Chai',
    'UnitPrice': 18,
    'Discontinued': false,
},
{
    'ProductID': 2,
    'ProductName': 'Chang',
    'UnitPrice': 19,
    'Discontinued': false,
},
{
    'ProductID': 3,
    'ProductName': 'Aniseed Syrup',
    'UnitPrice': 10,
    'Discontinued': false,
},
{
    'ProductID': 4,
    'ProductName': "Chef Anton's Cajun Seasoning",
    'UnitPrice': 22,
    'Discontinued': false,
},
];

export default {
components: {
    Grid,
},
data () {
    return {
        gridData: sampleProducts,
        filter: {
            logic: 'and',
            filters: [],
        },
        skip: 0,
        take: 10,
        pageSize: 5,
        pageable: {
            buttonCount: 5,
            info: true,
            type: 'numeric',
            pageSizes: true,
            previousNext: true,
        },
        sort: [],
        group: [],
        columns: [
            { field: 'ProductID', filterable: false, title: 'Product ID', width: '130px' },
            { field: 'ProductName', title: 'Product Name' },
            { field: 'UnitPrice', filter: 'numeric', title: 'Unit Price' },
            { field: 'Discontinued', filter: 'boolean', title: 'Discontinued' },
        ],
    };
},
computed: {
    total () {
        return this.gridData ? this.gridData.length : 0;
    },
},
mounted () {
    this.getData();
},
methods: {
    getData: function () {
        this.gridData = process(sampleProducts,
            {
                skip: this.skip,
                take: this.take,
                group: this.group,
                sort: this.sort,
                filter: this.filter,
            });
    },
    // ------------------Sorting------------------
    sortChangeHandler: function (event) {
        this.sort = event.sort;
        this.getData();
    },
    // ------------------Paging------------------
    pageChangeHandler: function (event) {
        this.skip = event.page.skip;
        this.take = event.page.take;
        this.getData();
    },
    // ------------------Filter------------------
    filterChangeHandler: function (event) {
        this.filter = event.filter;
        this.getData();
    },
    // ------------------Grouping------------------
    groupChangeHandler: function (event) {
        this.group = event.group;
        this.getData();
    },
},
};
</script>

导入'@progress/kendo-theme-default/dist/all.css'；
从'@progress/kendo vue Grid'导入{Grid}；
从“@progress/kendo数据查询”导入{process}；
常量样本产品=[
{
“ProductID”：1，
'ProductName'：'Chai'，
“单价”：18，
“中止”：错误，
},
{
“ProductID”：2，
'ProductName'：'Chang'，
“单价”：19，
“中止”：错误，
},
{
“ProductID”：3，
“产品名称”：“茴香糖浆”，
“单价”：10，
“中止”：错误，
},
{
“ProductID”：4，
'ProductName'：“厨师安东的卡津调味品”，
“单价”：22，
“中止”：错误，
},
];
导出默认值{
组成部分：{
网格，
},
数据（）{
返回{
gridData:sampleProducts，
过滤器：{
逻辑：'和'，
过滤器：[]，
},
跳过：0，
拍摄：10，
页面大小：5，
可分页：{
按钮计数：5，
信息：没错，
键入：“数值”，
页面大小：对，
上一篇：是的，
},
排序：[]，
组：[]，
栏目：[
{字段：'ProductID'，filterable:false，标题：'ProductID'，宽度：'130px'}，
{字段：'ProductName'，标题：'Product Name'}，
{字段：“单价”，过滤器：“数值”，标题：“单价”}，
{字段：'contracted'，过滤器：'boolean'，标题：'contracted'}，
],
};
},
计算：{
总数（）{
返回this.gridData？this.gridData.length:0；
},
},
挂载（）{
T