el-table 行合并

el-table 行合并

重复的太多 故此 合并下(適用于無關聯性的行合併)
<template>
  <div>
    <el-table
      :data="data"
      style="width: 100%"
      :header-cell-style="TableHead"
      :span-method="objectSpanMethod"
    >
      <el-table-column
        label="費用"
        prop="費用"
        fixed
      />
      <el-table-column
        label="因子"
        prop="因子"
        fixed
        width="140"
      />
      <el-table-column
        label="影響會科"
        prop="影響會科"
        fixed
        width="150"
      />
      <el-table-column
        label="影響週期"
        fixed
        prop="影響週期"
        width="120"
      />
      <el-table-column
        label="計算方式"
        fixed
        prop="計算方式"
        align="center"
      />
      <el-table-column
        label="單位"
        fixed
        prop="單位"
        align="center"
      />
      <el-table-column
        fixed
        label="owner"
        align="center"
        prop="owner"
      />
      <el-table-column
        v-for="(item,index) in tableColumn"
        :key="index"
        :label="item"
        :prop="item"
        align="center"
        width="120"
      />
    el-table>
  div>
template>
JS
 objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex <= 2) {
        if (!this.data[rowIndex]) {
          // 1列 1行
          return {
            rowspan: 1,
            colspan: 1
          }
        }
        // console.log(this.data[rowIndex].contractNo);
        if (this.data[rowIndex - 1]) {
          if (this.data[rowIndex][column.property] === this.data[rowIndex - 1][column.property]) {
            // 0列 0 行
            return {
              rowspan: 0,
              colspan: 0
            }
          }
        }
        if (this.data[rowIndex + 1]) {
          if (this.data[rowIndex][column.property] === this.data[rowIndex + 1][column.property]) {
            let conutRowSpan = 1
            let countIndex = 1
            var len = this.data.length
            // 往下遍历 重复的列有几个 合并几个
            for (var i = rowIndex; i <= len; i++) { // 遍历数组
              if (this.data[rowIndex + countIndex] && this.data[rowIndex][column.property] === this.data[rowIndex + countIndex][column.property]) {
                countIndex += 1
                conutRowSpan += 1
              } else {
                break
              }
            }
            // 2列1行
            return {
              rowspan: conutRowSpan,
              colspan: 1
            }
          }
        }
      } else {
        return {
          rowspan: 1,
          colspan: 1
        }
      }
    }

你可能感兴趣的:(Vue,javascript,前端,开发语言)