<template>
? ? <el-table
? ? ? :data="tableData"
? ? ? style="width: 100%">
? ? ? <el-table-column
? ? ? ? prop="date"
? ? ? ? label="日期"
? ? ? ? width="180">
? ? ? </el-table-column>
? ? ? <el-table-column
? ? ? ? prop="name"
? ? ? ? label="姓名"
? ? ? ? width="180">
? ? ? </el-table-column>
? ? ? <el-table-column
? ? ? ? prop="address"
? ? ? ? label="地址">
? ? ? </el-table-column>
? ? </el-table>
? </template>
data() {
? ? ? ? return {
? ? ? ? ? tableData: [{
? ? ? ? ? ? date: '2016-05-02',
? ? ? ? ? ? name: '王小虎',
? ? ? ? ? ? address: '上海市普陀區(qū)金沙江路 1518 弄'? ? ? ? ? }, {
? ? ? ? ? ? date: '2016-05-04',
? ? ? ? ? ? name: '王小虎',
? ? ? ? ? ? address: '上海市普陀區(qū)金沙江路 1517 弄'? ? ? ? ? }, {
? ? ? ? ? ? date: '2016-05-01',
? ? ? ? ? ? name: '王小虎',
? ? ? ? ? ? address: '上海市普陀區(qū)金沙江路 1519 弄'? ? ? ? ? }, {
? ? ? ? ? ? date: '2016-05-03',
? ? ? ? ? ? name: '王小虎',
? ? ? ? ? ? address: '上海市普陀區(qū)金沙江路 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){ //第一列根據(jù)相同name合并
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? spanOneArr[concatOne] += 1;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? spanOneArr.push(0);
? ? ? ? ? ? ? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? spanOneArr.push(1);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? concatOne = index;
? ? ? ? ? ? ? ? ? ? ? ? ? ? };
? ? ? ? ? ? ? ? ? ? ? ? ? ? if(item.date === arr[index - 1].date){//第二列根據(jù)相同日期合并? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 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){ //第三列根據(jù)相同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
? ? ? ? ? ? ? ? ? ? ? ? };
? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
