Vue2/element-ui el-table实现指定行的隐藏与显示，并自动根据显示的行数调整列表合并项

目标效果：根据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,
			}
		}
	}
},