实现表格合并单元格、在表格做输入处理以及数值统计

妖狐艹你老母 2024-03-17 13:08 7阅读 0赞

需求：表格样式涉及到合并单元格，功能上可以在表格最后一列输入分数，并自动统计总分。

大体样式![77bd2935530641928c28fa127748deae.png][]

代码：

表格：

:span-method 属性用来合并单元格

:summary-method 属性用来实现自动统计

![a43200941e3c4b57af071f7a98eb6c52.png][]

> // 合并单元格操作
> 
> objectSpanMethod(\{ row, column, rowIndex, columnIndex \}) \{
> 
> if (columnIndex == 0) \{
> 
> if (rowIndex == 0) \{
> 
> //第一行
> 
> return \{
> 
> rowspan: 3,
> 
> colspan: 1,
> 
> \};
> 
> \} else if (rowIndex < 3) \{
> 
> return \{
> 
> rowspan: 0,
> 
> colspan: 0,
> 
> \};
> 
> \}
> 
> \}
> 
> if (rowIndex == 5) \{
> 
> if (columnIndex == 0) \{
> 
> return \{
> 
> rowspan: 1,
> 
> colspan: 4,
> 
> \};
> 
> \} else if (columnIndex < 4) \{
> 
> return \{
> 
> rowspan: 0,
> 
> colspan: 0,
> 
> \};
> 
> \} else \{
> 
> return \{
> 
> rowspan: 1,
> 
> colspan: 2,
> 
> \};
> 
> \}
> 
> \}
> 
> \},

> // 表尾合计总分
> 
> getTotalScore(param) \{
> 
> const \{ columns, data \} = param;
> 
> const sums = \[\];
> 
> columns.forEach((column, index) => \{
> 
> if (index === 1) \{
> 
> sums\[index\] = '最终得分';
> 
> return;
> 
> \}
> 
> const values = data.map((item) => Number(item\[column.property\]));
> 
> if (!values.every((value) => isNaN(value))) \{
> 
> sums\[index\] = values.reduce((prev, curr) => \{
> 
> const value = Number(curr);
> 
> if (!isNaN(value)) \{
> 
> return prev + curr;
> 
> \} else \{
> 
> return prev;
> 
> \}
> 
> \}, 0);
> 
> sums\[index\] = 0;
> 
> this.sumsScore = sums\[index\];
> 
> \} else \{
> 
> sums\[index\] = '';
> 
> \}
> 
> \});
> 
> return sums;
> 
> \},

[77bd2935530641928c28fa127748deae.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/2a32a95a49ff46229879b371466955fd.png
[a43200941e3c4b57af071f7a98eb6c52.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/f53cc5f53907434ab39eed516501063e.png