vue实现table合并相同的内容元素格

主要实现方法

getList (list,code,rowSpan) {
      let arrZero = []
      return list.map((item, i) => {
        let RowSpanNum = 1
        for (let j = i + 1; j < list.length; j++) {
          if (item[code] === list[j][code]) {
            arrZero.push(j)
            RowSpanNum++
          } else {
            break;
          }
        }
        if(arrZero.findIndex( ele => ele == i) != -1) {
          RowSpanNum = 0
        }
        return {
          ...item,
          [rowSpan]:RowSpanNum
        }
      })
    },

使用

// list 就是你需要处理的列表，dealMethod为判断的字段，dealRowSpan为将被添加的字段，这个字段代表这个对象占多少个行
let arr = this.getList(list,'dealMethod','dealRowSpan')

页面渲染

<table class="info-table" border="1">
    <thead>
        <tr>
            <td>被监测字段</td>
            <td>取样日期</td>
        </tr>
    </thead>
    <tbody>
        <tr v-for="item in arr">
            <template v-if="item.dealRowSpan != 0">
                <td :rowspan="item.dealRowSpan">
                  <div>{{ item.dealMethod }}</div>
                </td>
            </template>
            <td>
                <div>{{ item.fetchDate }}</div>
            </td>
        </tr>
    </tbody>
</table>

实现效果图：