el-table merges the same rows (two-dimensional array) | [pass custom parameters in span-method in el-table in elementUI]

1. Effect

Core code display:

1. The method in 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 page plus

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

Full code: 

<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')

Reference document: element-ui merges el-table cells with the same name_Jiaojiaosmecta's blog-CSDN blog_span-method merges the same name