elementUI table合并相同數(shù)據(jù)的單元格

1.官方文檔上的例子事件不能實(shí)現(xiàn)這個(gè)功能
2.合并單元格事件span-method的四個(gè)參數(shù)不知道如何將上下兩行的參數(shù)進(jìn)行比對(duì)，來(lái)判斷是否合并單元格。
請(qǐng)問哪位有實(shí)現(xiàn)過(guò)的嗎餓了么UI合并單元格

回答

編輯回答

浪婳

<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: "無(wú)",
            }, {
                yuefen: "2018-08",
                kehuzongshu: "1",
                huocheju: "無(wú)",
            }, {
                yuefen: "2018-10",
                kehuzongshu: "1",
                huocheju: "無(wú)",
            }, {
                yuefen: "2018-10",
                kehuzongshu: "1",
                huocheju: "無(wú)",
            }, {
                yuefen: "2018-10",
                kehuzongshu: "1",
                huocheju: "無(wú)",
            }, {
                yuefen: "2018-510",
                kehuzongshu: "1",
                huocheju: "無(wú)",
            }, {
                yuefen: "2018-610",
                kehuzongshu: "1",
                huocheju: "無(wú)",
            }]
  };
},
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')

2018年4月10日 13:35

編輯回答

鹿惑

今天剛剛好實(shí)現(xiàn)了動(dòng)態(tài)的判斷數(shù)據(jù)參數(shù)是否相同進(jìn)行對(duì)比

contactArray的實(shí)現(xiàn) 不難的。。。

這么多人求源碼我就貼上來(lái)吧。。

幾個(gè)月前寫的確實(shí)忘了挺多了

2017年5月18日 10:45

編輯回答

賤人曾

直接扔代碼~
<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>

2018年6月9日 23:47

編輯回答