Element-uiフォームはspan-methodを動的にマージします

公式文書は簡単に説明しています： 

/**
     * 表格合并
     * @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
            };
          }
        }

上記は静的データの形式です

次に、動的データをマージする方法を紹介します。

私のデータ形式：

テーブルの関係は1対多であり、データの一部は結合クエリの後に複製されるため、リストがオブジェクトになり、マージされます。

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
                        };
                    }


                }
            },

効果 

 最初に公式文書を見てください。インターネット上にも同様の指示がたくさんありますが、希望する効果を得るには、独自のデータ形式に従ってコードを変更する必要があります。