如何解决制表符:是否可以为每行添加具有计算值的自定义列?
是否可以为每行添加具有计算值的自定义列?因此,如果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
中找到版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。