element Table 单元格合并

1、el-table 上绑定方法 :span-method="objectSpanMethod"

      // 表格合并行

      objectSpanMethod ({ row, column, rowIndex, columnIndex }) {

        if (columnIndex === 1) {

          const _row = this.testArr1[rowIndex];

          const _col = _row > 0 ? 1 : 0;

          // console.log(_col,'hhhh')

          return {

            rowspan: _row,

            colspan: _col,

          };

        }

        if (columnIndex === 2) {

          const _row = this.testArr2[rowIndex];

          const _col = _row > 0 ? 1 : 0;

          return {

            rowspan: _row,

            colspan: _col,

          };

        }

        if (columnIndex === 0) {

          const _row = this.testArr3[rowIndex];

          const _col = _row > 0 ? 1 : 0;

          return {

            rowspan: _row,

            colspan: _col,

          };

        }

      },

2、      rowspan (spanArr, position, spanName) {

        this.tableData.forEach((item, index) => {

          if (index === 0) {

            spanArr.push(1);

            position = 0;

          } else {

            // console.log(this.tableData[index][spanName])

            if (

              this.tableData[index][spanName] ===

              this.tableData[index - 1][spanName]

            ) {

              if (this.tableData[index][spanName]) {

                spanArr[position] += 1;

                spanArr.push(0);

              } else {

                spanArr.push(1);

                position = index;

              }

            } else {

              spanArr.push(1);

              position = index;

            }

          }

        });

      },

2、在获取表格数据的请求里面(记得先清空数据、不然加载有问题)

            this.testArr1 = []

            this.testArr2 = []

            this.testArr3 = []

            this.rowspan(this.testArr1, this.testPosition1, "sxmc");

            this.rowspan(this.testArr2, this.testPosition2, "sxyq");

            this.rowspan(this.testArr3, this.testPosition3, "index");

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容