el-table 行合并

我不会C#

已于 2022-07-20 11:45:28 修改

阅读量1.2k

点赞数

分类专栏： Vue 文章标签： javascript 前端开发语言

于 2022-07-19 13:46:37 首次发布

原文链接：https://www.freesion.com/article/99041354094/

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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
        }
      }
    }