elementUI table合并相同数据的单元格

Question

1.官方文档上的例子事件不能实现这个功能
2.合并单元格事件span-method的四个参数不知道如何将上下两行的参数进行比对，来判断是否合并单元格。
请问哪位有实现过的吗饿了么UI合并单元格

Answer 1

今天刚刚好实现了 动态的判断数据参数是否相同进行对比

contactArray的实现 不难的。。。

这么多人求源码 我就贴上来吧。。

几个月前写的 确实忘了挺多了

Answer 2

直接扔代码~
<template>

<div>
    <el-table :data="tableData4" :span-method="objectSpanMethod" border>
        <el-table-column prop="id" label="11" width="180">
        </el-table-column>
        <el-table-column prop="name" label="22">
        </el-table-column>
        <el-table-column prop="amount1" label="33">
        </el-table-column>
        <el-table-column prop="amount2" label="44">
        </el-table-column>
        <el-table-column prop="amount3" label="55">
        </el-table-column>
        <el-table-column prop="amount3" label="66">
        </el-table-column>
        <el-table-column prop="amount3" label="77">
        </el-table-column>
        <el-table-column prop="amount3" label="88">
        </el-table-column>
        <el-table-column prop="amount3" label="99">
        </el-table-column>
    </el-table>
</div>

</template>
<script>
import moment from "moment";
export default {

methods: {
    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:function(){
    let contactDot = 0;
    this.tableData4.forEach((item,index) => {
        item.index = index;
        if(index === 0){
            this.spanArr.push(1);
        }else{
            if(item.id === this.tableData4[index - 1].id){
                this.spanArr[contactDot] +=1;
                this.spanArr.push(0);
            }else{
                this.spanArr.push(1);
                contactDot = index;
            }
        }
    });
},
data() {
    return {
        spanArr:[],
        tableData4: [
            {
                id: "12987122",
                name: "王小虎",
                amount1: "234",
                amount2: "3.2",
                amount3: 10
            },
            {
                id: "12987122",
                name: "王小虎",
                amount1: "165",
                amount2: "4.43",
                amount3: 12
            },
            {
                id: "你好",
                name: "王小虎",
                amount1: "324",
                amount2: "1.9",
                amount3: 9
            },
            {
                id: "你好",
                name: "王小虎",
                amount1: "621",
                amount2: "2.2",
                amount3: 17
            },
             {
                id: "你好",
                name: "王小虎",
                amount1: "621",
                amount2: "2.2",
                amount3: 17
            },
             {
                id: "你",
                name: "王小虎",
                amount1: "621",
                amount2: "2.2",
                amount3: 17
            },
             {
                id: "你",
                name: "王小虎",
                amount1: "621",
                amount2: "2.2",
                amount3: 17
            },
            {
                id: "你",
                name: "王小虎",
                amount1: "539",
                amount2: "4.1",
                amount3: 15
            },
             {
                id: "他",
                name: "王小虎",
                amount1: "539",
                amount2: "4.1",
                amount3: 15
            }
        ],
        formLabelWidth: "90px"
    };
},
computed: {},
beforeMount: function() {},

};
</script>

Answer 3

既然能够得到行号和列号，数据你又是知道的，行号+1不就是下一行的数据了么

Answer 4

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.4.5/lib/index.js"></script>
<div id="app">
<template>
<div>

<el-table :data="tableData6" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px">
  <el-table-column prop="yuefen" label="ID" width="180">
  </el-table-column>
  <el-table-column prop="kehuzongshu" label="姓名">
  </el-table-column>
  <el-table-column prop="huocheju" label="姓名2">
  </el-table-column>
</el-table>

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

var Main = {

data() {
  return {
    tableData6: [{
                yuefen: "2018-08",
                kehuzongshu: "1",
                huocheju: "无",
            }, {
                yuefen: "2018-08",
                kehuzongshu: "1",
                huocheju: "无",
            }, {
                yuefen: "2018-10",
                kehuzongshu: "1",
                huocheju: "无",
            }, {
                yuefen: "2018-10",
                kehuzongshu: "1",
                huocheju: "无",
            }, {
                yuefen: "2018-10",
                kehuzongshu: "1",
                huocheju: "无",
            }, {
                yuefen: "2018-510",
                kehuzongshu: "1",
                huocheju: "无",
            }, {
                yuefen: "2018-610",
                kehuzongshu: "1",
                huocheju: "无",
            }]
  };
},
methods: {
  objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        var num = 0
          if (columnIndex == 0 || columnIndex == 2) {
            for(var i=0;i<this.tableData6.length;i++){
              if(row.yuefen == this.tableData6[i].yuefen){
                num++;
              }
            }
            console.log('aa')
            if(num==1){
              return {
                rowspan: num,
                colspan: 1
              };
            }else if(num>1){
              if(this.tableData6[rowIndex-1] && this.tableData6[rowIndex].yuefen == this.tableData6[rowIndex-1].yuefen){
                return {
                  rowspan: 0,
                  colspan: 0
                }
              }else{
                return {
                  rowspan: num,
                  colspan: 1
                }
              }
            }    
            
          }  
        }
}

}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')