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

一、功能需求

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

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

二、功能实现

<template>

  <div class="effect">

    <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>

  </div>

</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>