element ui表格相同内容自动合并

2018-08-13 来源: 饭米雪 发布在  https://www.cnblogs.com/fmixue/p/9469296.html

一开始觉得合并单元格很困难,什么鬼,后来仔细查看api,发现是可以实现的,特此记录下,直接看代码,

项目需求是第一列和第二列还有第16列需要相同内容进行合并,所以判断条件是不同的;

实现后效果如下:

<el-table  :data="tableDataOne"  style="width: 100%"  :span-method="objectOneMethod">
</el-table>
methods:{   
let spanOneArr = [],      spanTwoArr = [],      concatOne = 0,      concatTwo = 0;  tableData.forEach((item,index)=>{    if(index === 0){      spanOneArr.push(1);      spanTwoArr.push(1);    }else{      if(item.topic === tableData[index - 1].topic){ //第一列需合并相同内容的判断条件        spanOneArr[concatOne] += 1;        spanOneArr.push(0);      }else{        spanOneArr.push(1);        concatOne = index;      };      if(item.name === tableData[index - 1].name){//第二列和第16列需合并相同内容的判断条件
        spanTwoArr[concatTwo] += 1;        spanTwoArr.push(0);      }else{        spanTwoArr.push(1);        concatTwo = index;      };    }  });  return  {    one: spanOneArr,    two: spanTwoArr  }},
 
objectOneMethod({ row, column, rowIndex, columnIndex }) {  if(columnIndex === 0 ) {    const _row = (this.setTable(this.tableDataOne).one)[rowIndex];    const _col = _row > 0 ? 1 : 0;    return {      rowspan: _row,      colspan: _col    };  }  if(columnIndex === 1 || columnIndex === 15) {    const _row = (this.setTable(this.tableDataOne).two)[rowIndex];    const _col = _row > 0 ? 1 : 0;    return {      rowspan: _row,      colspan: _col    };  }},
};希望能帮到有需要的童鞋们;

相关文章