elementUI 合并整列(竖向)数据(span-method传递参数),并解决错位问题

合并:

1.<el-table>标签中加入:

:span-method="objectSpanMethod"

span-method如果传递参数,就这样写(以index为例)

:span-method="

    (row, column, rowIndex, columnIndex) => {

        return objectSpanMethod(

            { row, column, rowIndex, columnIndex },

            index

        );
    }

"

2.定义 objectSpanMethod 方法:(以合并第8和第9列为例)

objectSpanMethod({ row, column, rowIndex, columnIndex }, index) {
    if (row.columnIndex === 9 || row.columnIndex === 8) {
        let tableData = this.tableList[index].tableData;
        if (row.rowIndex % tableData.length == 0) {
          return {
            rowspan: tableData.length,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
    }
},

3.重要!! 如果修改数据后出现错位问题,请在数据赋值后(或者created后)执行doLayout方法

this.$nextTick(() => {
      // myTable是表格的ref属性值
      if (this.$refs.myTable && this.$refs.myTable.doLayout) {
        this.$refs.myTable.doLayout();
      }
})

参考解决Element-ui的el-table出现的表格错位问题_element ui 表格错位_卿本无忧的博客-CSDN博客

附ref如果为动态设置(不鼓动) 那么参考以下:

//设置ref
:ref="'item'+index"


使用
let gv='item'+i;
this.$refs[gv][0].doLayout();

根据索引 绑定动态ref_js中的动态refs_bliss河北小宝的博客-CSDN博客