如何在syncfusion vue js数据网格中使用计算字段

Question

如何在 syncfusion vue js 数据网格中使用计算值？

例如

假设我有 5 列作为 QUANTITY、MRP、DISCOUNT、DISCOUNTED PRICE、TOTAL。 我想根据给定的 MRP 和 DISCOUNT 值计算 DISCOUNTED PRICE。 并且还想根据给定值 QUANTITY 和 DISCOUNTED PRICE 计算 TOTAL。

如何在 syncfusion vue js databgrid 中实现这一点？ 提前感谢您的帮助。

Answer 1

https://vuejs.org/v2/guide/computed.html 您可以阅读默认 vue 计算值，并将 v-bind:value='computedProperty' 添加到需要计算的单元格中。如果你给你的代码一个沙箱，我会尽力帮助你。

Answer 2

我们了解您希望在初始页面加载时根据其他三个字段值计算总价和折扣价。根据您的查询，我们准备了一个示例，并通过使用queryCellInfo 事件满足了您的要求。

var templateGrid = Vue.component('ShowerTemplateList', { 
        template: ` 
                <ejs-grid ref='grid' id='grid' :dataSource="data" :columns='columns' 
                    :editSettings='editSettings' :toolbar='toolbar' :queryCellInfo='queryCellInfo' :actionComplete='actionComplete'> 
                </ejs-grid> 
            `, 
        `data: function () { 
            return { 
                data: new ej.data.DataManager({ 
                    url: "/Home/UrlDatasourceone", 
                    updateUrl: "Home/Updateone", 
                    insertUrl: "Home/Insertone", 
                    removeUrl: "Home/Removeone", 
                    adaptor: new ejs.data.UrlAdaptor() 
                }), 
                columns: [ 
                    { field: 'OrderID', headerText: 'ID', isPrimaryKey: true, width: 100 }, 
                    { field: 'Quantity', headerText: 'Quantity', width: 100 }, 
                    { field: 'MRP', headerText: 'MRP', width: 100 }, 
                    { field: 'Discount', headerText: 'Discount', width: 100 }, 
                    { field: 'Discountprice', headerText: 'Discount price', width: 100 }, 
                    { field: 'Total', headerText: 'Total', width: 100 } 
                ], 
                editSettings: { 
                    allowEditing: true, 
                    allowAdding: true, 
                    allowDeleting: true, 
                    mode: "Normal" 
                }, 
                toolbar: ["Add", "Edit", "Delete", "Update", "Cancel"] 
            } 
        }, 
        methods: { 
            actionComplete: function (args) { 
                if (args.requestType === "beginEdit") { 
                    var grid = document.getElementsByClassName("e-grid")[0] 
                        .ej2_instances[0]; 
                    grid.editModule.formObj.element[1].addEventListener("keyup", function ( 
                        e 
                    ) { 
                       var grid = document.getElementsByClassName("e-grid")[0] 
                            .ej2_instances[0]; 
                        var Totalquantity = +e.target.value; 
                        var GivenMrp = +grid.editModule.formObj.element[2].value; 
                        var Discount = +grid.editModule.formObj.element[3].value; 
                        var offerprice = (GivenMrp * Discount) / 100; 
                        var Res = GivenMrp - offerprice; 
                        grid.editModule.formObj.element[5].value = Res * Totalquantity; 
                    }); 
                    grid.editModule.formObj.element[2].addEventListener("keyup", function ( 
                        e 
                    ) { 
                        //For calculating price 
                        var grid = document.getElementsByClassName("e-grid")[0] 
                            .ej2_instances[0]; 
                        var GivenMrp = +e.target.value; 
                        var Totalquantity = grid.editModule.formObj.element[1].value; 
                        var Discount = +grid.editModule.formObj.element[3].value; 
                        var offerprice = (GivenMrp * Discount) / 100; 
                        var discountprice = GivenMrp - offerprice; 
                        grid.editModule.formObj.element[4].value = discountprice; 
                        grid.editModule.formObj.element[5].value = 
                            Totalquantity * discountprice; 
                    }); 
                    grid.editModule.formObj.element[3].addEventListener("keyup", function ( 
                        e 
                    ) { 
                       var grid = document.getElementsByClassName("e-grid")[0] 
                            .ej2_instances[0]; 
                        var discount = +e.target.value; 
                        var GivenMrp = +grid.editModule.formObj.element[2].value; 
                        var Totalquantity = grid.editModule.formObj.element[1].value; 
                        var offerprice = (GivenMrp * discount) / 100; 
                        var prc = GivenMrp - offerprice; 
                        grid.editModule.formObj.element[4].value = prc; 
                        grid.editModule.formObj.element[5].value = Totalquantity * prc; 
                    }); 
                } 
            }, 
            queryCellInfo: function (args) { 
                if (args.column.field === "Discountprice") {          //the querycellinfo triggers for every cell rendering 
                    var discount = (args.data.MRP * args.data.Discount) / 100; 
                    var discountprice = args.data.MRP - discount; 
                    args.data.Discountprice = discountprice;  //here we have calculated the discount price and updated the value to datasource 
                    args.cell.innerText = discountprice;     //here we have set the discount price to the cell value for UI changes 
                } 
                if (args.column.field === "Total") { 
                    var discountprice = (args.data.Discountprice * args.data.Quantity); 
                    args.data.Total = discountprice;          //here we have calculated the Total price and updated the value to datasource 
                    args.cell.innerText = discountprice;      //here we have set the Total price to the cell value for UI changes 
                } 
            } 
        } 
    }); `

示例：https://www.syncfusion.com/downloads/support/forum/154221/ze/1542211673557847.zip

文档：https://ej2.syncfusion.com/documentation/api/grid/#querycellinfo