目标效果:根据el-checkbox组件绑定选择的属性,自动调整表项,以实现只显示选中的属性,并且自动调整列表合并项,以实现年份和属性的正确对应。
效果示意图:
实现思路:
首先,需要设置el-checkbox组件并绑定到data中,并为el-table设定row-class-name属性(设置行样式)与span-method属性(列表合并方法):
然后在showRow方法中根据当前行索引与选择的属性进行比较,决定是否隐藏:
最后调整列表合并项方法:
monthlyDataSpanMethod({ row, column, rowIndex, columnIndex }){
// 根据选择的属性计算要合并的行数,选择了多少个属性就要合并多少行
var rows = this.showStrategy + this.showBench + this.showHedged
if(columnIndex === 0){
// 根据选择的属性,从头向后决定开始合并的行索引,直到找到第一个显示的属性为止
if(this.showStrategy){
// 若showStrategy为true,则策略收益就是我们要显示的第一个属性
// 从这策略收益行开始往下合并
if((rowIndex + 3) % 3 === 0){
return {
rowspan: rows,
colspan: 1,
}
}
// 非指定行不合并
else{
return {
rowspan: 0,
colspan: 0,
}
}
}
// 其他if以此类推
else if(this.showBench){
if((rowIndex + 2) % 3 === 0){
return {
rowspan: rows,
colspan: 1,
}
}
else{
return {
rowspan: 0,
colspan: 0,
}
}
}
else if(this.showHedged){
if((rowIndex + 1) % 3 === 0){
return {
rowspan: rows,
colspan: 1,
}
}
else{
return {
rowspan: 0,
colspan: 0,
}
}
}
else{
return {
rowspan: 0,
colspan: 0,
}
}
}
},