小剧情
后端只给提供必要的数据结构,理由是性能高。如果想在页面table中顺利展示,我势必需要重新对数据进行加工。
对于一个功能的开发,到底是属于后端处理还是前端处理并没有清晰地界限,开心就好。
后端不处理,那就我来,有时候成长机会就是这样白白捡来的。这一遭走下来,才领略到对象的美,且是那种只可意会不可言传的内在美。
核心依赖:对象的属性不存在相同的名字,且属性名可以是包含空字符串在内的任意字符串。
界面展示
部分数据模型示例
数据模型篇幅过长,这里只展示其中部分,具体的可以在片尾的源码进行下载。可以根据实际情况换成接口返回的数据。
{
"总裁办": [{ //部门名称
"code": 1115501,
"costName": "社保", //成本费用名称
"cost": 16336.61 //成本费用金额
}],
"财务部": [{
"code": 1116624,
"costName": "分成款",
"cost": 1200.50
}],
"成本列表": [{
"code": 0,
"costName": "分成款" //成本费用名称
},{
"code": 2,
"costName": "社保"
}]
}
成本列表:该数组中为所有部门参与的成本。
思路
1、表头:成本费用名称是写死的。部门01…部门n是通过数据模型 “成本列表” 属性获取的动态数据。表头的每项都有一个唯一的标识。
2、唯一数据列:每个表格必定会有唯一数据项列,上边表格界面中,唯一数据列是成本费用名称。可以理解为每行数据的成本费用名称是不会重复的。
3、行数据对象:每行数据以对象的形式进行存储。属性名是成本费用名称,属性值是成本费用对应表头相关数据的键值对。
JS代码
说明:示例中使用的antd的table,表格数据项结构是按照它的要求建的。
/**格式化表格数据 */
formateTableDataFn(list){
let _this = this;
//表头
let columns = [
{
key:`costTitle`,
title:<span>成本费用名称</span>,
dataIndex:'costTitle'
}
];
let keysArr = Object.keys(list); //返回数据中部门key
for( let agencyName of keysArr){
if(agencyName==='成本列表'){ //跳过成本列表
continue;
}
columns.push({
key:`${agencyName}`,
title:<span>{agencyName}</span>,
dataIndex:agencyName,
})
}
//表体
let leftCostNameArr = list['成本列表'];
let tableDataObj = {};
let tableDataArr = [];
leftCostNameArr.map((item)=>{
let {costName} = item;
tableDataObj[costName] = {
key:costName,
costTitle:costName
}
//防止对象的key名如果为数字时会自行排序
tableDataArr.push(tableDataObj[costName]);
})
//数据对象格式化
for(let allKey in list){
list[allKey].map((item)=>{
let { costName,cost} = item;
let theEle = <span>{cost}</span>;
//引用类型特点:引用类型赋给变量,只是将指向该值的指针赋给了变量,所以无论哪个变量对引用类型的值进行改动,都会影响所有相关变量。
//这里更改对象对应的属性,存储到数组中的对象也会相应的改变。
//这里借助的是对象的costName属性名不存在同名,在遍历list[allKey]时,将costName属性对应值的结构补充完成
tableDataObj[costName][allKey] = theEle;
})
}
}