制表符：是否可以为每行添加具有计算值的自定义列？

问题描述

是否可以为每行添加具有计算值的自定义列？因此，如果col 1的值为“ 3”，而col 2的值为“ 5”，那么我想要动态col 3的总和为8。

我正在使用Vue制表器。这是我的Table.vue组件。

<template>
    <div v-if="tabledata" class="w-full p-3 border border-gray-200 shadow-xl rounded-lg  mt-10">
        <VueTabulator id="usersData" v-model="tabledata" :options="options" />
    </div>
</template>
<script>
export default {
    data(){
        return{
            tabledata: [
                {
                    "name": "Hron","lvl2": 5,"lvl3": 0,"score": 5
                },{
                    "name": "Zhr","lvl2": 2,"lvl3": 1,"score": null
                },{
                    "name": "Mang","lvl2": 4,"score": null
                }
            ],options: {
                layout:"fitColumns",columns: [
                    {title:"S#",formatter:"rownum",width:70,align:"center",responsive:3},{title:"Name",field:"name",minWidth:150},{title:"Lvl 2",field:"lvl2",sorter:"number",formatter:"money",formatterParams:{precision:false},bottomCalc:"sum",minWidth:80},{title:"Lvl 3",field:"lvl3",{title:"score",field:"score",formatterParams:{precision:true},bottomCalc:"avg"}
                ]
            }
        }
    }
}
</script>

我希望数据输出在表中看起来像这样。

[
  {
    "name": "Hron","score": 5
  },{
    "name": "Zhr","score": 3
  },{
    "name": "Mang","score": 5
  }
]

我一直在寻找文档，但是找不到任何东西。

谢谢

解决方法

您将要使用 mutator 来实现。

如果我们从一些包含两列带有值的示例数据开始

var data = [
    {col1:27,col2:55}
];

然后定义一个自定义的mutator函数，用于计算这两行的总和

var customMutator = function(value,data,type,params,component){
    //value - original value of the cell
    //data - the data for the row
    //type - the type of mutation occurring  (data|edit)
    //params - the mutatorParams object from the column definition
    //component - when the "type" argument is "edit",this contains the cell component for the edited cell,otherwise it is the column component for the column

    return data.col1 + data.col2 ; //return the sum of the other two columns.
}

然后在我们的列定义中，添加第三个具有组成的 field 名称的列，并在 mutator 属性上设置mutator函数：

columns:[
    {title:"Column 1",field:"col1"},{title:"Column 2",field:"col2"},{title:"Sum Column",field:"sumCol",mutator:customMutator},//make column the sum of the other two columns
]

详细信息可以在Mutator Documentation

中找到

javascript tabulator vue.js