vue使用el-table 合並行_合並列_合並單元格，超詳細注釋

前言

要實現的效果如下，既有行合並，又有列合並。注意：最后的合計行10是自己計算的，並不是table組件計算的，我這里直接寫data上了，廢話不多說，上代碼！

代碼可復制到https://codepen.io/pen/這里運行查看效果

 

 

 html部分

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.5/lib/index.js"></script>
<div id="app">
<template>
  <div>
    <el-table
      :data="tableData"
      :span-method="arraySpanMethod"
      border
      style="width: 100%">
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="amount1"
        sortable
        label="數值 1">
      </el-table-column>
      <el-table-column
        prop="amount2"
        sortable
        label="數值 2">
      </el-table-column>
    </el-table>

    
  </div>
</template>
</div>

css部分

@import url("//unpkg.com/element-ui@2.15.5/lib/theme-chalk/index.css");

js部分

var Main = {
    data() {
      return {
          tableData: [
          {
            id: 1,
            name: 111,
            amount1:1,
            amount2:1,
          },
          {
            id: 1,
            name: 111,
             amount1:1,
            amount2:1,
          },
          {
            id: 1,
            name: 111,
             amount1:1,
            amount2:1,
          },
          {
            id: 2,
            name: 222,
             amount1:2,
            amount2:2,
          },
          {
            id: 3,
            name: 222,
            amount1:3,
            amount2:3,
          },
          {
            id: 3,
            name: 222,
            amount1:3,
            amount2:3,
          },
          {
            id: '合計',
            name: 11,
            amount1:10,
            amount2:null,
          }
        ],
        //spanArr用於存放每一行記錄的合並數
　　　　spanArr: [],
      };
    },
  mounted() {
    let contactDot = 0;
    this.tableData.forEach( (item,index) => {
      //遍歷tableData數據，給spanArr存入一個1，第二個item.id和前一個item.id是否相同，相同就給
      //spanArr前一位加1，spanArr再存入0，因為spanArr為n的項表示n項合並，為0的項表示該項不顯示,后面有spanArr打印結果
      if(index===0){
        this.spanArr.push(1)
      }else{
        if(item.id === this.tableData[index-1].id){
          this.spanArr[contactDot] += 1;
          this.spanArr.push(0)
        }else{
          contactDot = index
          this.spanArr.push(1)
        }
      }
    })
  },
    methods: {
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      //rowIndex表示當前行號，從0開始，合計是第6行
      if(rowIndex !==6){
        //columnIndex表示當前列號，這里處理ID,姓名，數值2
        if(columnIndex === 0||columnIndex===1||columnIndex===3){
          const _row = this.spanArr[rowIndex]
          const _col = _row>0?1:0;
          //該形式為行合並
          return{
            rowspan:_row,
            colspan:_col
          }
        }
        
      }else if(rowIndex ==6){
        //處理合計，[1,2]表示合並1行2列，[0,0]表示改行不顯示
        if(columnIndex === 0){
          //定位到6行0列的ID，告訴該單元格合並1行2列
          return [1,2]
        }else if(columnIndex===1){
          //定位到6行1列的姓名，告訴該單元格不顯示
          return [0,0]
        }
      }  
    },
}
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

spanArr打印結果如下：

 

 注意

再vue-cli項目中，mounted用watch替代，代碼如下

watch:{
    tableData:{
      handler(val){
        if(val.lenght>0){要清空spanArr等數組  ...這里寫mounted內的方法}
      },
      immediate:true
    }
  }

 

結尾

以上就完成了，el-table行、列的合並

 

 

參考網址：https://www.cnblogs.com/js-liqian/p/12092484.html