elementUI表格合並單元格

相信你肯定看了 ElementUI 官方文檔了，沒看的話先去看下表格各個屬性的意義，方便下文閱讀：傳送門

但你會發現此例過於簡單，死數據，但我們開發的時候往往都是后台傳遞過來的數據，導致我們 rowspan 的參數需要自己做判斷，根據數據的相同行（或列）進行合並；

我們先看下結果：

 代碼附上：

<template>
  <div class="">
    <el-table
        :data="listData"
        :span-method="objectSpanMethod"
        class="tableArea"
        style="width: 100%">
        <el-table-column
          prop="type"
          label="序號"
          align="center"
          width="200"/>
        <el-table-column
          prop="sheetType"
          label="工單類型"
          />
        <el-table-column
          prop="taskKey"
          label="taskKey"
          />
        <el-table-column
          prop="templateUrl"
          label="templateUrl"
          />
        <el-table-column
          label="操作"
          >
          <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" content="修改" placement="top-start">
                      <i class="el-icon-edit-outline"  @click="modify(scope)" />
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="刪除" placement="top-start">
            <i class="el-icon-delete" @click="deleteData(scope)" />
                    </el-tooltip>
          </template>
        </el-table-column >
      </el-table>
  </div>
</template>
<script>
 
export default {
  name: 'myNeedDeal',
  data() {
    return {
      rowList: [],
      spanArr: [],
      position: 0,
      listData: []
    }
  },
 
  methods: {
      queryData(){//查詢操作
          this.listData = [
              {
            id:1,
          type:1,
          sheetType: "事件單",
          taskKey: "shijian_01",
          templateUrl: "/shijian_01"
        },
        {
            id:2,
          type:1,
          sheetType: "事件單",
          taskKey: "shijian_02",
          templateUrl: "/shijian_02"
        },
        {
            id:3,
          type:1,
          sheetType: "事件單",
          taskKey: "shijian_03",
          templateUrl: "/shijian_04"
        },
        {
            id:4,
          type:2,
          sheetType: "問題單",
          taskKey: "wenti_01",
          templateUrl: "/wenti_01"
        },
        {
            id:5,
          type:2,
          sheetType: "問題單",
          taskKey: "wenti_02",
          templateUrl: "/wenti_02"
        },
        {
            id:6,
          type:2,
          sheetType: "問題單",
          taskKey: "wenti_03",
          templateUrl: "/wenti_03"
        }
          ];
          this.rowspan()
      },
      rowspan() {
          this.listData.forEach((item,index) => {
            if( index === 0){
                this.spanArr.push(1);
                this.position = 0;
            }else{
                if(this.listData[index].type === this.listData[index-1].type ){
                    this.spanArr[this.position] += 1;
                    this.spanArr.push(0);
                }else{
                    this.spanArr.push(1);
                    this.position = index;
                }
            }
        })
      },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {  //表格合並行
        if (columnIndex === 0) {
            const _row = this.spanArr[rowIndex];
            const _col = _row>0 ? 1 : 0;
            return {
                rowspan: _row,
                colspan: _col
            }
        }
        if(columnIndex === 1){
            const _row = this.spanArr[rowIndex];
            const _col = _row>0 ? 1 : 0;
            return {
                rowspan: _row,
                colspan: _col
            }
        }
    }
  },
  mounted() {
    this.queryData();
  }
}
</script>
<style lang="scss" scoped>
.el-select {
  margin-right: 15px;
}
.el-input {
  margin-right: 15px;
  width: 200px;
}
.tableArea {
  margin-top: 20px;
  box-shadow: 0 0 8px 0 #aaa;
}
i[class^="el-icon"] {
  margin-right: 5px;
  font-size: 16px;
  cursor: pointer;
}
.modify_table{
    td{
        padding: 10px ;
    }
}
.item_title{
    text-align: right;    
}
</style>
 

詳細說明：

:span-method="objectSpanMethod"  

這個是官方給定的綁定屬性和對應的方法，objectSpanMethod 傳入了 { row, column, rowIndex, columnIndex }

row: 當前行

column: 當前列

rowIndex：當前行號

columnIndex ：當前列號

該函數可以返回一個包含兩個元素的數組，第一個元素代表rowspan，第二個元素代表colspan。 也可以返回一個鍵名為rowspan和colspan的對象。

this.spanArr 數組 ，返回的是相對應的行合並行數

這個示例打印出的this.spanArr為 [3, 0, 0, 3, 0, 0]，比如，第一個元素為3，表示第一行應該向下合並3行（即第一行的rowspan為3），第二個元素的rowspan為0，就讓它“消失”。

rowspan（）這個函數就是用來返回 this.spanArr 數組的，定義每一行的 rowspan

rowspan（）函數，if( index === 0)，第一行，直接先給數組push進一個1，表示自己先占一行，this.position是數組元素的位置（此時是從數組元素的第一個開始，所以this.position為0）， this.position為0意思表示的就是數組的第一個元素。

當到了index為2的時候，if(this.listData[index].type === this.listData[index-1].type )，讓第二行與第一行作比較，

如果第二行與第一行相等的話，this.position就+1，當有n行第一行相同，this.position就為n，表示向下合並n行；第二行自己就this.spanArr.push(0)，表示第二行“消失”，因為第一行和第二行合並了啊。

如果第二行與第一行不相等的話，那么this.spanArr.push(1);就讓第二行自己獨占一行；this.position = index意思就是把指針拿到index這行來，表示設置數組this.spanArr[this.position]的元素值，然后定義從此行開始向下合並幾行（可能這句話我表述的不是很清楚你可以根據我這個示例研究下，當index為3時，this.position為3，當index為4時，第四行與第三行需要合並，那么在數組的this.position元素就要+1了，也就是this.spanArr[this.position] += 1）

還有最后一句話

const _col = _row>0 ? 1 : 0;

定義的這一個單元格列的合並，我們項目只合並行，不合並列；

_row：代表合並行的行數，_row的值要么是1，或者更大的自然正整數，要么是0。

1代表：獨占一行

更大的自然數：代表合並了若干行

0：代表“消失”的哪那一個單元格，后面的單元格向前推一格