vue + Element UI table动态合并单元格

一、功能需求

  1、根据名称相同的合并工作阶段和主要任务合并这两列，但主要任务内容一样，但要考虑主要任务一样，但工作阶段不一样的情况。（枞向合并）

2、落实情况里的定量内容和定性内容值一样则合并。（横向合并）

二、功能实现

<template>

<el-table :data="tableData" border style="width: 100%" :span-method="objectSpanMethod">

  <el-table-column type="index" label="序号" align="center" width="180">

  </el-table-column>

  <el-table-column prop="name" label="工作阶段" align="center" min-width="180">

  </el-table-column>

  <el-table-column prop="address" label="主要任务" align="center" min-width="180">

  </el-table-column>

</el-table>

</template> <script> export default { data () { return { tableData: [ { name: 'a', address: '1', age:'1', six:'2' }, { name: 'a', address: '1', age:'1', six:'2' }, { name: 'a', address: '1', age:'1', six:'2' }, { name: 'a', address: '1', age:'1', six:'2' }, { name: 'a', address: '2', age:'1', six:'2' }, { name: 'a', address: '2', age:'1', six:'1' }, { name: 'a', address: '3', age:'1', six:'1' }, { name: 'a', address: '3', age:'1', six:'1' }, { name: 'b', address: '3', age:'1', six:'1' }, { name: 'b', address: '3', age:'1', six:'1' }, { name: 'b', address: '3', age:'1', six:'1' }, { name: 'b', address: '4', age:'1', six:'1' }, { name: 'b', address: '4', age:'1', six:'1' }, { name: 'b', address: '5', age:'2', six:'1' }, { name: 'b', address: '5', age:'', six:'' }, ] } }, mounted () { // 处理第二列的合并 for (let i = 0; i < this.tableData.length; i++) { //第一个单元格合并列为1 this.tableData[i].nameSpan = 1 //和后面值的比较， for (let j = i+1; j < this.tableData.length; j++) { //如果值一样，则合并列为+1 if(this.tableData[i].name != this.tableData[j].name){ //如果遇到值不一样，则将 i = k -1 因为 下次循环i会+1 i = j-1 // 结束循环 break; }else{ this.tableData[i].nameSpan += 1 // 最后一行了,将k的值赋给i,结束循环 if(j == this.tableData.length-1){ i = j // 结束循环 break; } } } } // 处理第三列的合并 for (let i = 0; i < this.tableData.length; i++) { //第一个单元格合并列为1 this.tableData[i].addressSpan = 1 //和后面值的比较， for (let k = i+1; k < this.tableData.length; k++) { //如果值一样，则合并列为+1 if(this.tableData[i].address == this.tableData[k].address && this.tableData[i].name == this.tableData[k].name){ this.tableData[i].addressSpan += 1 // 最后一行了,将k的值赋给i,结束循环 if(k == this.tableData.length-1){ i = k // 结束循环 break; } }else{ //如果遇到值不一样，则将 i = k -1 因为 下次循环i会+1 i = k-1 // 结束循环 break; } } } // 处理第四列和第五列横向合并 for (let i = 0; i < this.tableData.length; i++) { this.tableData[i].ageColspan = 1 if(this.tableData[i].age && this.tableData[i].six && this.tableData[i].age == this.tableData[i].six){ this.tableData[i].ageColspan += 1 } } console.log(this.tableData); }, methods: { //合并方法 objectSpanMethod ({ row, column, rowIndex, columnIndex }) { if (columnIndex === 1) { return {rowspan:row.nameSpan,colspan: 1} } if (columnIndex === 2) { return {rowspan:row.addressSpan,colspan: 1} } if (columnIndex === 3) { return {rowspan:1,colspan: row.ageColspan} } } }, } </script> <style lang="scss" scoped> .effect { width: 100%; height: calc(100vh - 90px); padding: 5px; } </style>