element-ui el-table 中合并行或列的计算方法如何实现"多个表"不同行的合并

最新推荐文章于 2024-08-30 09:35:19 发布

原创最新推荐文章于 2024-08-30 09:35:19 发布 · 4.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#element-ui #vue #el-table

element-ui 专栏收录该内容

0 篇文章

订阅专栏

本文介绍如何在Element UI的el-table组件中，处理多表格数据并实现首列单元格的合并显示。通过在row数据中记录计数信息，解决了span-method参数限制问题，实现了类似Excel的复杂合并效果。

用el-table画多个表，第一列要合并展示。所以需要知道每个表的数据总数。

如图示：

span-method 的方法实现里。参数无法传递。单一表时，可以通过对 this.tabledata(表格数据）来处理运算得到。

但同时多个表，就没法区分了。

span-method内部方法，只允许一个对象四个参数，Function({ row, column, rowIndex, columnIndex })

想着往里传参，也没法解决。。。卡住了。。。

突然想起第一个参数，row，这是当前数据行。把计数写到对应行数据里面，不就解决了？

测试通过！

其实这就是一个思考角度的问题，总想直接外部解决。实际数据构组装时，就可以知道对应行列的分布和设计，从而在row数据内，做好相应的数据准备，灵活应用，可以组成复杂的，类似excel的任意合并效果。

------------------------

如下部分代码：

循环略，item为表一个子项

<el-table
  :data="item.tableData"
  :span-method="objectSpanMethod"
  style="width: 100%"
  border
>

tableDatas: 
[
"tableData": [{
    rowcount: 4,
    rowtitle:'总',
    "n":"10",
    "0": '12.34',
    "1": '1.1',
    "2": '2.2',
    "3": '3.3',
    "4": '4.4',
    "5": '5.5',
    "6": '6.6',
    "7": '7.7',
    "8": '0.1110101'
},{ "n":"20", "0": '12.34', "1": '1.1', "2": '2.2', "3": '3.3', "4": '4.4', "5": '5.5', "6": '6.6', "7": '7.7', "8": '0.1110101' }
...
],
...
]

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    if (columnIndex === 0 && rowIndex === 0) {
        return {
            rowspan: row.rowcount ? row.rowcount : 1,
            colspan: 1
        };
    } else if (columnIndex === 0){
        return {
            rowspan: 0,
            colspan: 0
        };
    }
},