vue table spanmethod 合并列

<el-table :data="listItem.data" :border="true" :span-method="objectSpanMethod">
   <el-table-column type="index" cell-style="40" width="100" align="center">
   </el-table-column>
</e-table>

  

data() {
  return {
  listItem: {
    data: [],
    loading: false
  },
  tempMergeIndex: [],
  }  
}

  

watch: {
        "listItem.data": {
            handler(arr) {
                var tempMergeIndex = [];
                var pos = null;
                for (let i = 0; i < arr.length; i++) {
                    if (i === 0) {
                        tempMergeIndex.push(1);
                        pos = 0;
                    } else {
                        if (arr[i].classType === arr[i - 1].classType) {
                            tempMergeIndex[pos] += 1;
                            tempMergeIndex.push(0);
                        } else {
                            tempMergeIndex.push(1);
                            pos = i;
                        }
                    }
                }
                this.tempMergeIndex = tempMergeIndex;
            },
            deep: true
        }
    },

  

method: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                return {
                    rowspan: this.tempMergeIndex[rowIndex],
                    colspan: 1
                };
            }
        },
}

  

  

原文地址:https://www.cnblogs.com/WoAiZmm/p/15656995.html