vue element 自动合并单元格算法

1. el-table 加入
   

   :span-method="spanMethod"

   <el-table ref="multipleTable" :data="list" v-loading="listLoading" element-loading-text="加载中"
                   border fit highlight-current-row  stripe  style="width: 100%"
                   :show-summary="summary"
                   :span-method="spanMethod">
           <el-table-column align="center" :width="value.width" v-for='(value,key) in columnList' :label="value.title"
                            :key="key" :prop="value.key" sortable>
           </el-table-column>
         </el-table>

    

2. 最主要的是方法(传入的数据要记得排序)
   在下面代码里

3. 注意方法里面的 this.list 就是 上面 el-table标签里面的数据 :data="list"

   columnIndex <= 2 改成自己需要处理的列序号(第一列是0)

   spanMethod({ row, column, rowIndex, columnIndex }) {
           if (columnIndex <= 2) {
             if (row[column.property] === '') {
               return [1, 1]
             }
             if (this[column.property] !== row[column.property]) {
               this[column.property] = row[column.property]
               let num = 0
               for (let i = rowIndex; i < this.list.length; i++) {
                 if (this.list[i][column.property] === row[column.property]) {
                   num++
                   if (i === this.list.length - 1) {
                     return [num, 1]
                   }
                 } else {
                   return [num, 1]
                 }
               }
             } else {
               return [0, 0]
             }
           }
         }

    

4. 效果图