element-ui表格动态合并span-method

ゝ一纸荒年。 2022-01-20 22:21 1108阅读 0赞

官方文档简单说明：

/**
         * 表格合并
         * @param {*} param0
         * row 表格每一行的数据
         * column 表格每一列的数据
         * rowIndex 表格的行索引,不包括表头,从0开始
         * columnIndex 表格的列索引,从0开始
         */
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {     // 合并第一列的行数据 合并多列的中间用||隔开
              if (rowIndex % 1 === 0) {  // 从第二行开始 ，这样第一行的其他数据不会别合并
                return {// 这里返回的是行和列的合并数量,可以返回一个数组,也可以返回一个对象,效果一样
                  rowspan: 2,// 合并行数
                  colspan: 1 // 合并列数
                };
              } else {
                return { // 表示其他列的数据进行消除，本例就是columnIndex === 0，第一列第二行下面的数据省略
                  rowspan: 0,
                  colspan: 0
                };
              }
            }

上面是静态数据的格式

现在介绍我动态数据怎么合并：

我的数据格式：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2ODAyNzI2_size_16_color_FFFFFF_t_70][]

列表里面为对象 ，因为表关系是一对多的 经过联合查询 有一部分数据是重复的所以进行合并。

dealTable() {//数据处理
                    //vm.dataList为列表数据，vm.getDate为存放合并数据的列表
                    //思路是将列表重复数据的第一条数据的下标、重复次数取出放入vm.getDate供其他方法使用
                    let data = vm.dataList;
                    for (index in data) {
                        var flag = true;
                        var i = 1;
                        for (index1 in vm.getDate) {//去重
                            
                            if (data[index].hzzygtxyId == vm.getDate[index1].id) {
                                flag = false;
                                vm.getDate[index1].len++;
                            }//end if
    
                        }
                        if (flag) {
                            vm.getDate.push({
                                id:data[index].hzzygtxyId,
                                index: index,
                                len: i为重复次数 
                            })
                        }
    
                    }//end for
                },

objectSpanMethod({row, column, rowIndex, columnIndex}) {
                    vm.dealTable();
                    if (columnIndex != 7 && columnIndex != 8) {
    
                        let ind = null;
                        let len = 1;
                        for (index in vm.getDate) {
                            if (rowIndex == vm.getDate[index].index) {//查询进入的行数据是否在vm.getDate里面，若里面存在将合并的行数进行赋值
                                ind = 1;
                                len = vm.getDate[index].len;
                            } 
                        }
                        if (rowIndex % ind === 0) {
                            return {
                                rowspan: len,//合并行数
                                colspan: 1
                            };
                        } else {
                            return {
                                rowspan: 0,
                                colspan: 0
                            };
                        }
    
    
                    }
                },

效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2ODAyNzI2_size_16_color_FFFFFF_t_70 1][]

先看官方文档，网上类似说明也很多，但是要根据自己的数据格式进行代码改变，得到你想要的效果。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2ODAyNzI2_size_16_color_FFFFFF_t_70]: /images/20220121/deed84bcc1324d9a9e0da0b6daf05052.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2ODAyNzI2_size_16_color_FFFFFF_t_70 1]: /images/20220121/c3fa8bfcf33f4574a3770886b402cd36.png