在之前的一篇博客中针对这个问题,写了解决方法。现在是加了新需求,发现之前的算法有一些不足之处,现在进行纠正。
目前表格的需求是:
评估人/评估分数/加减分说明,这个组合,根据评估人相同,就列合并;指标项目,评估人是为空的,这个组合都不合并;
处理人/处理分数/加减分说明,这个组合,是动态表头,有可能只有一个组合,也有可能有2个组合,也有可能是3个组合;处理人是全合并,处理分数/加减分说明是指标项目,不合并,非指标项目全合并。
实现的效果图如下:
具体实现代码如下:(这里是以弹窗为例的。也可以不写在弹窗中。)
考核周期:
2019年11月考核
姓名:张三
{{"提前"}}
{{"正常"}}
{{"滞后"}}
{{"已完成"}}
{{"暂停"}}
{{"中止"}}
{{"未启动"}}
代码到此就完成了。
其中需要注意的就是:row与col的合并,上面代码中,例入spanArr=[1,99,99,3,0,0] 99就代表row为0,col也为0,是被收起来的树节点的子节点,需要被隐藏掉;这种场景代表项目1为关闭,隐藏项目1下的子节点,项目2为打开,col需要合并为3,0,0,row都为1,0代表的是col此时不合并。
需要注意的第二点就是:当得到的人名组合为kpiObjArr=[a,22,22,b,b,b],如何将这个数组变为[1,99,99,3,0,0]这样的格式,22上述代码中已写过备注,代表被收起来的子节点,需要被隐藏。【kpiObjArr的场景非常多,这里再说几个例子 :
kpiObjArr=[a,22,22,a,a,a,b,b,b] --------------------------------------------------spanArr=[4,0,0,0,99,99,3,0,0]
kpiObjArr=[a,22,22,a,22,22,b,22,22]------------------------------------------------------spanArr=[2,0,99,99,99,99,1,99,99]
需要找到规律,来将这个数组进行转化成功,最后再表格自带的合并方法中进行渲染,
】
下面补充一下,后台返回的tableData的数据格式(数据多,所以没有写在上面进行定义)
// 后台返回的表格数据
tableData: [
{
id: '1191670059258875904',
isFixed: false,
approverName1: '张三',
approverName2: '王五',
approverName3: '李四',
approverDiffScoreDescribe1: '',
approverDiffScoreDescribe2: '',
approverDiffScoreDescribe3: '',
score1: 100,
score2: 100,
score3: 100,
kpiScore: 99,
name: "王五",
num: 2,
objectName: "项目1",
remarks: null,
selfRating: null,
timelong: null,
weight: null,
workProgress: null,
workStatus: null,
assesseDiffScoreDescribe: 'null',
children:[
{
id: "11916698122256666",
name: "王五",
objectName: "工作项1",
remarks: "垃圾数据22019-11-05周报:已完成",
selfDiffScoreDescribe: null,
selfRating: 100,
timelong: 8,
weight: 100,
workProgress: 100,
workStatus: "4",
approverName1: '',
approverName2: '',
approverName3: '',
approverDiffScoreDescribe1: '',
approverDiffScoreDescribe2: '',
approverDiffScoreDescribe3: '',
score1: null,
score2: null,
score3: null,
},
{
id: "2222222333322999999",
name: "王五",
objectName: "工作项2",
remarks: "垃圾数据22019-11-05周报:已完成",
selfDiffScoreDescribe: null,
selfRating: 100,
timelong: 8,
weight: 100,
workProgress: 100,
workStatus: "4",
approverName1: '张三',
approverName2: '王五',
approverName3: '李四',
approverDiffScoreDescribe1: '',
approverDiffScoreDescribe2: '',
approverDiffScoreDescribe3: '',
score1: 100,
score2: 100,
score3: 100,
}
]
},
{
id: '11916700592588759042',
isFixed: false,
approverName1: '张三',
approverName2: '王五',
approverName3: '李四',
approverDiffScoreDescribe1: '',
approverDiffScoreDescribe2: '',
approverDiffScoreDescribe3: '',
score1: 100,
score2: 100,
score3: 100,
kpiScore: 88,
name: "王五",
num: 2,
objectName: "项目2",
remarks: null,
selfRating: null,
timelong: null,
weight: null,
workProgress: null,
workStatus: null,
assesseDiffScoreDescribe: 'null333',
children:[
{
id: "119166981222566662",
name: "王五",
objectName: "工作项1",
remarks: "垃圾数据22019-11-05周报:已完成",
selfDiffScoreDescribe: null,
selfRating: 100,
timelong: 8,
weight: 100,
workProgress: 100,
workStatus: "4",
approverName1: '',
approverName2: '',
approverName3: '',
approverDiffScoreDescribe1: '',
approverDiffScoreDescribe2: '',
approverDiffScoreDescribe3: '',
score1: null,
score2: null,
score3: null,
},
{
id: "22222223333229999992",
name: "王五",
objectName: "工作项2",
remarks: "垃圾数据22019-11-05周报:已完成",
selfDiffScoreDescribe: null,
selfRating: 100,
timelong: 8,
weight: 100,
workProgress: 100,
workStatus: "4",
approverName1: '张三',
approverName2: '王五',
approverName3: '李四',
approverDiffScoreDescribe1: '',
approverDiffScoreDescribe2: '',
approverDiffScoreDescribe3: '',
score1: 100,
score2: 100,
score3: 100,
},
{
id: "00000000002",
name: "王五",
objectName: "工作项3",
remarks: "垃圾数据22019-11-05周报:已完成",
selfDiffScoreDescribe: null,
selfRating: 100,
timelong: 8,
weight: 100,
workProgress: 100,
workStatus: "4",
approverName1: '张三',
approverName2: '王五',
approverName3: '李四',
approverDiffScoreDescribe1: '',
approverDiffScoreDescribe2: '',
approverDiffScoreDescribe3: '',
score1: 100,
score2: 100,
score3: 100,
}
]
},
{
id: '11916700592588759042a',
isFixed: false,
approverName1: '张三',
approverName2: '王五',
approverName3: '李四',
approverDiffScoreDescribe1: '',
approverDiffScoreDescribe2: '',
approverDiffScoreDescribe3: '',
score1: 100,
score2: 100,
score3: 100,
kpiScore: 100,
name: "aaa兰",
num: 2,
objectName: "项目3",
remarks: null,
selfRating: null,
timelong: null,
weight: null,
workProgress: null,
workStatus: null,
assesseDiffScoreDescribe: null,
children:[
{
id: "119166981222566662a",
name: "aaa兰",
objectName: "工作项1",
remarks: "垃圾数据22019-11-05周报:已完成",
selfDiffScoreDescribe: null,
selfRating: 100,
timelong: 8,
weight: 100,
workProgress: 100,
workStatus: "4",
approverName1: '',
approverName2: '',
approverName3: '',
approverDiffScoreDescribe1: '',
approverDiffScoreDescribe2: '',
approverDiffScoreDescribe3: '',
score1: null,
score2: null,
score3: null,
},
{
id: "00000000002a",
name: "aaa兰",
objectName: "工作项2",
remarks: "垃圾数据22019-11-05周报:已完成",
selfDiffScoreDescribe: null,
selfRating: 100,
timelong: 8,
weight: 100,
workProgress: 100,
workStatus: "4",
approverName1: '张三',
approverName2: '王五',
approverName3: '李四',
approverDiffScoreDescribe1: '',
approverDiffScoreDescribe2: '',
approverDiffScoreDescribe3: '',
score1: 100,
score2: 100,
score3: 100,
}
]
},
{
id: '9',
isFixed: true,
approverName1: '',
approverName2: '',
approverName3: '',
approverDiffScoreDescribe1: '',
approverDiffScoreDescribe2: '',
approverDiffScoreDescribe3: '',
score1: null,
score2: null,
score3: null,
kpiScore: '',
name: "",
num: 2,
objectName: "指标项目1",
remarks: null,
selfRating: null,
timelong: null,
weight: null,
workProgress: null,
workStatus: null,
assesseDiffScoreDescribe: null,
children:[
{
id: "99",
approverName1: '张三',
approverName2: '王五',
approverName3: '李四',
approverDiffScoreDescribe1: '',
approverDiffScoreDescribe2: '',
approverDiffScoreDescribe3: '',
score1: 50,
score2: 40,
score3: 60,
name: "",
objectName: "指标1",
remarks: "垃圾数据22019-11-05周报:已完成",
selfDiffScoreDescribe: null,
selfRating: 100,
timelong: 8,
weight: 100,
workProgress: 100,
workStatus: "4",
kpiScore: '',
},
{
id: "999",
approverName1: '张三',
approverName2: '王五',
approverName3: '李四',
approverDiffScoreDescribe1: '',
approverDiffScoreDescribe2: '',
approverDiffScoreDescribe3: '',
score1: 101,
score2: 102,
score3: 103,
name: "",
objectName: "指标2",
remarks: "垃圾数据22019-11-05周报:已完成",
selfDiffScoreDescribe: null,
selfRating: 100,
timelong: 8,
weight: 100,
workProgress: 100,
workStatus: "4",
kpiScore: '',
}
]
},
{
id: '91',
isFixed: true,
approverName1: '',
approverName2: '',
approverName3: '',
approverDiffScoreDescribe1: '',
approverDiffScoreDescribe2: '',
approverDiffScoreDescribe3: '',
score1: null,
score2: null,
score3: null,
kpiScore: '',
name: "",
num: 2,
objectName: "指标项目2",
remarks: null,
selfRating: null,
timelong: null,
weight: null,
workProgress: null,
workStatus: null,
assesseDiffScoreDescribe: null,
children:[
{
id: "991",
approverName1: '张三',
approverName2: '王五',
approverName3: '李四',
approverDiffScoreDescribe1: '',
approverDiffScoreDescribe2: '',
approverDiffScoreDescribe3: '',
score1: 50,
score2: 40,
score3: 60,
name: "",
objectName: "指标项1",
remarks: "垃圾数据22019-11-05周报:已完成",
selfDiffScoreDescribe: null,
selfRating: 100,
timelong: 8,
weight: 100,
workProgress: 100,
workStatus: "4",
kpiScore: '',
},
{
id: "9991",
approverName1: '张三',
approverName2: '王五',
approverName3: '李四',
approverDiffScoreDescribe1: '',
approverDiffScoreDescribe2: '',
approverDiffScoreDescribe3: '',
score1: 101,
score2: 102,
score3: 103,
name: "",
objectName: "指标项2",
remarks: "垃圾数据22019-11-05周报:已完成",
selfDiffScoreDescribe: null,
selfRating: 100,
timelong: 8,
weight: 100,
workProgress: 100,
workStatus: "4",
kpiScore: '',
}
]
},
],