el-table 合并相同行（二维数组）|【elementUI中el-table中span-method 中传递自定义参数】

1.效果

核心代码展示：

1.method 里面的方法

    // 合并单元格
    flitterData(arr) {
      const spanOneArr = []
      let concatOne = 0
      arr.forEach((item, index) => {
        if (index === 0) {
          spanOneArr.push(1)
        } else {
          if (item.name === arr[index - 1].name) { // 第一列需合并相同内容的判断条件
            spanOneArr[concatOne] += 1
            spanOneArr.push(0)
          } else {
            spanOneArr.push(1)
            concatOne = index
          }
        }
      })
      return {
        one: spanOneArr
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }, index) {
      console.log('合并行', index)
      if (columnIndex === 0) {
        const _row = (this.flitterData(this.tableData[index]).one)[rowIndex]
        console.log(_row, rowIndex)
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },

2.el-table页面加

 :span-method="(param)=>objectSpanMethod(param,index)"

完整代码： 

<script src="//unpkg.com/vue@2/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
<template>
  <div  v-for="(item,index) in bigHeader">
<!--    v-for="(item,index) in bigHeader" -->

    <el-table
      :data="tableData[index]"
      :span-method="(param)=>objectSpanMethod(param,index)"
      border
      style="width: 100%; margin-top: 20px">

      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="amount1"
        label="数值 1（元）">
      </el-table-column>

      </el-table-column>
    </el-table>
  </div>
</template>
</div>

@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");

var Main = {
    data() {
      return {
        bigHeader:['1','2'],
        tableData: [[
        {
          name: 'DA',
          amount1: '234',

        }, {
          name: '小',
          amount1: '165',
        },{
          name: '小',
          amount1: '165',
        },
          {
          name: 'da',
          amount1: '165',
        },
          {
          name: 'da',
          amount1: '165',
        }
    
        ],
                 
                    [
        {
          name: '小',
          amount1: '234',

        }, {
          name: '大',
          amount1: '165',

        }, {
          name: '大',
          amount1: '324',

        }
    
        ],
     ]
      };
    },
    methods: {

 // 合并单元格
    flitterData(arr) {
      const spanOneArr = []
      let concatOne = 0
      arr.forEach((item, index) => {
        if(index=== 0){
              spanOneArr.push(1)
          }  else {
            if (item.name === arr[index - 1].name) { // 第一列需合并相同内容的判断条件
              spanOneArr[concatOne] += 1
              spanOneArr.push(0)
            } else {
              spanOneArr.push(1)
              concatOne = index
            }
        }

      })
      return {
        one: spanOneArr
        

      }
    },
      objectSpanMethod({ row, column, rowIndex, columnIndex },index) {
        console.log("合并行",index)
       if (columnIndex === 0) {
              const _row = (this.flitterData(this.tableData[index]).one)[rowIndex]
              console.log(_row,rowIndex)
              const _col = _row > 0 ? 1 : 0
              return {
                rowspan: _row,
                colspan: _col
              }
       }
      }
      }
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

参考文档：element-ui合并相同名称el-table单元格_娇娇思密达的博客-CSDN博客_span-method合并相同名称