kendo Vue filiter功能

最新推荐文章于 2025-06-10 09:41:39 发布

原创最新推荐文章于 2025-06-10 09:41:39 发布 · 359 阅读

0 ·

CC 4.0 BY-SA版权

Vue.js 同时被 2 个专栏收录

4 篇文章

订阅专栏

kendo

2 篇文章

订阅专栏

本文介绍如何在Kendo UI Grid中配置数据源和过滤器，使用'contains'操作符进行产品名称的模糊搜索，并通过定义过滤器逻辑实现特定订单ID的数据筛选。

<!-- 直接输入查找，无漏斗，contains -->
        <kendo-grid-column :field="'ProductName'"
                           :width="180"
                           :filterable-cell-show-operators="false"
                           :filterable-cell-operator="'contains'"
                           ></kendo-grid-column>

    <kendo-datasource ref="datasource1"
                      :type="'odata'"
                      :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders'"
                      :page-size='20'
                      :filter="filter"//定义过滤器
                      :server-paging="true"
                      :server-filtering="true"
                      :schema-model-fields="dsSchemaFields">
    </kendo-datasource>

data () {
        return {
           filter: {//定义的过滤器
            logic: "and",
            filters: [
                { field: "OrderID", operator: "eq", value: 10248 }
            ]
        },
            dsSchemaFields: {
                OrderID: { type: "number" },
                Freight: { type: "string" },
                ShipName: { type: "string" },
                OrderDate: { type: "date" },//有日期数据类型需要生命type:"date"
                ShipCity: { type: "string" }
            }
          
        }
    },

用methods和钩子函数触发更新

methods: {

        logData: function() {
          
            var ds = this.$refs.datasource1.kendoWidget();
            ds.fetch();
        }
    },
    mounted:function(){
      this.logData();
    }