制表符:是否可以为每行添加带有计算值的自定义列?
Tabulator: Is it possible to add custom column with calculated value for each row?
是否可以为每一行添加带有计算值的自定义列?因此,如果第 1 列的值为“3”,第 2 列的值为“5”,那么我想要总和值为 8 的动态第 3 列。
我正在使用 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,
"lvl3": 1,
"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", align:"center", formatter:"money", formatterParams:{precision:false}, bottomCalc:"sum", minWidth:80},
{title:"Lvl 3", field:"lvl3", sorter:"number", align:"center", formatter:"money", formatterParams:{precision:false}, bottomCalc:"sum", minWidth:80},
{title:"Score", field:"score", sorter:"number", align:"center", formatterParams:{precision:true}, bottomCalc:"avg"}
]
}
}
}
}
</script>
我希望数据输出在 table 中看起来像这样。
[
{
"name": "Hron",
"lvl2": 5,
"lvl3": 0,
"score": 5
},
{
"name": "Zhr",
"lvl2": 2,
"lvl3": 1,
"score": 3
},
{
"name": "Mang",
"lvl2": 4,
"lvl3": 1,
"score": 5
}
]
我一直在查看文档,但找不到任何东西。
谢谢
您需要使用 突变体 来实现。
如果我们从一些样本数据开始,其中包含带有值的两列
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 函数=29=] 属性:
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
]
中找到完整的详细信息
是否可以为每一行添加带有计算值的自定义列?因此,如果第 1 列的值为“3”,第 2 列的值为“5”,那么我想要总和值为 8 的动态第 3 列。
我正在使用 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,
"lvl3": 1,
"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", align:"center", formatter:"money", formatterParams:{precision:false}, bottomCalc:"sum", minWidth:80},
{title:"Lvl 3", field:"lvl3", sorter:"number", align:"center", formatter:"money", formatterParams:{precision:false}, bottomCalc:"sum", minWidth:80},
{title:"Score", field:"score", sorter:"number", align:"center", formatterParams:{precision:true}, bottomCalc:"avg"}
]
}
}
}
}
</script>
我希望数据输出在 table 中看起来像这样。
[
{
"name": "Hron",
"lvl2": 5,
"lvl3": 0,
"score": 5
},
{
"name": "Zhr",
"lvl2": 2,
"lvl3": 1,
"score": 3
},
{
"name": "Mang",
"lvl2": 4,
"lvl3": 1,
"score": 5
}
]
我一直在查看文档,但找不到任何东西。
谢谢
您需要使用 突变体 来实现。
如果我们从一些样本数据开始,其中包含带有值的两列
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 函数=29=] 属性:
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
]
中找到完整的详细信息