el-table实现相同字段名称合并列

data() {

        return {

          tableData: [{

            date: '2016-05-02',

            name: '王小虎',

            address: '上海市普陀区金沙江路 1518 弄'          }, {

            date: '2016-05-04',

            name: '王小虎',

            address: '上海市普陀区金沙江路 1517 弄'          }, {

            date: '2016-05-01',

            name: '王小虎',

            address: '上海市普陀区金沙江路 1519 弄'          }, {

            date: '2016-05-03',

            name: '王小虎',

            address: '上海市普陀区金沙江路 1516 弄'          }]

        }

      }

flitterData(arr){

                    let spanOneArr = [],

                    spanTwoArr = [],

                    spanThreeArr = [],

                    concatOne = 0,

                    concatTwo = 0,

                    concatThree =0;

                    arr.forEach((item,index)=>{

                        if(index === 0){

                            spanOneArr.push(1);

                            spanTwoArr.push(1);

                            spanThreeArr.push(1);

                        }else{

                            if(item.name === arr[index - 1].name){ //第一列根据相同name合并

                                spanOneArr[concatOne] += 1;

                                spanOneArr.push(0);

                            }else{

                                spanOneArr.push(1);

                                concatOne = index;

                            };

                            if(item.date === arr[index - 1].date){//第二列根据相同日期合并                                spanTwoArr[concatTwo] += 1;

                                spanTwoArr.push(0);

                            }else{

                                spanTwoArr.push(1);

                                concatTwo = index;

                            };

                            if(item.name === arr[index - 1].name&&item.address === arr[index - 1].address){ //第三列根据相同name和相同地址合并

                                spanThreeArr[concatThree] += 1;

                                spanThreeArr.push(0);

                            }else{

                                spanThreeArr.push(1);

                                concatThree = index;

                            };

                        }

                    });

                    return  {

                        one: spanOneArr,

                        two: spanTwoArr,

                        three: spanThreeArr

                    }

                },

objectSpanMethod({ row, column, rowIndex, columnIndex }) {

                    if(columnIndex === 0 ) { //第一列

                        const _row = (this.flitterData(this.tableData).one)[rowIndex];

                        const _col = _row > 0 ? 1 : 0;

                        return {

                          rowspan: _row,

                          colspan: _col

                        };

                      }

                      if(columnIndex === 2) {//第二列

                        const _row = (this.flitterData(this.tableData).two)[rowIndex];

                        const _col = _row > 0 ? 1 : 0;

                        return {

                          rowspan: _row,

                          colspan: _col

                        };

                      }

                      if(columnIndex === 1) {//第三列

                        const _row = (this.setTable(this.tableData).three)[rowIndex];

                        const _col = _row > 0 ? 1 : 0;

                        return {

                          rowspan: _row,

                          colspan: _col

                        };

                      }

                },

你可能感兴趣的:(el-table实现相同字段名称合并列)