<el-table v-loading="loading" :data="tableData" style="width: 100%" highlight-current-row :span-method="arraySpanMethod">

        <el-table-column type="index" label="序号" />

        <el-table-column v-for="item in formThead" :key="item.label" :label="item.label" :prop="item.prop" :formatter="item.formatter" :width="item.width || 'auto'" />

          </template>

        </el-table-column>

      </el-table>

  watch: {

    tableData: {

      handler(newVal) {

        this.tableColumns = newVal

        this.rowspan()

      },

      deep: true

    }

  },

data(){

 mergeObj: {},

      mergeRecording: [], // 合并记录 存放需要合并列的每行对应的合并数 [[当前行对应的合并数, 当前行对应的合并数, ...], ...]

      mergeArr: [

        'instrumentCode',

        'instrumentName',

        'checkQuantity',

       ....... formThead的prop

      ]

}

  // 合并逻辑

    rowspan() {

      for (let i = 0; i < this.mergeArr.length; i++) {

        const key = this.mergeArr[i]

        this.mergeObj[key] = [] // 记录合并数组

        this.mergeRecording[i] = [] // 记录本列合并的开头索引值

        let count = 0 // 合并数组对应索引

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

          // 当前为第一行的时候

          if (index === 0) {

            this.mergeObj[key].push(1)

            this.mergeRecording[i].push(index)

          } else {

            let lastState = false

            // 跳过表格第一列(序号),真实列从定义需要合并的列为基准

            if (i === 0) {

              lastState = true

            } else

            // 判断左列上下单元是否合并,适用场景为连续的合并

            if (this.mergeRecording[i - 1][index] === this.mergeRecording[i - 1][index - 1]) {

              lastState = true

            }

            // 如果说当前行与上一行是相同的数据

            if (item[key] === this.tableData[index - 1][key] && lastState) {

              this.mergeObj[key][count] += 1 // 上一行的合并数+1

              this.mergeObj[key].push(0) // 当前行的合并数是0

              this.mergeRecording[i].push(count) // 本单元格的合并的开头索引值

            } else {

              // 如果说当前行与上一行不相同  那么两个都不进行合并所以返回1,索引变成当前行索引

              this.mergeObj[key].push(1)

              count = index

              this.mergeRecording[i].push(count) // 赋值合并的开头索引值

            }

          }

        })

        // console.log(this.mergeRecording[i])

      }

    },

    // 合并方法

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

      if (this.mergeArr.indexOf(column.property) !== -1) {

        if (this.mergeObj[column.property][rowIndex]) {

          return [this.mergeObj[column.property][rowIndex], 1]

        } else {

          return [0, 0]

        }

      } else {

        return [1, 1]

      }

    }

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐