Vue+Element-ui＜根据相同字段合并表格＞

今天项目上遇到一个需求
就是还用elemtui 做的表格
让后让你把表格上根据某一列中相同的字段去合并起来
比如

类别    名字

		杀人回忆
电影    无双
		一代宗师
    
      小星星
音乐  两个老虎
	  东方红

首先你需要把整个的按照类别的字段来排序

类别    名字

电影 	杀人回忆
电影    无双
电影 	一代宗师
    
音乐   小星星
音乐  两个老虎
音乐   东方红

<template>
  <div class="app-content">
    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="id" label="ID" width="180" />
      <el-table-column prop="name" label="姓名" />
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: "1",
          name: "王小虎"
        },
        {
          id: "1",
          name: "王小虎"
        },
        {
          id: "1",
          name: "王小虎"
        },
        {
          id: "2"
        },
        {
          id: "3",
          name: "王小虎"
        },
        {
          id: "3",
          name: "王小虎"
        },
        {
          id: "3",
          name: "王小虎"
        },
        {
          id: "3",
          name: "王小虎"
        },
        {
          id: "5",
          name: "王小虎"
        },
        {
          id: "5",
          name: "王小虎"
        }
      ]
    };
  },
  created() {
    this.setrowspans();
  },
  methods: {
    /*
    这个方法是
    控制单元格的
    返回值是一个对象
    例如：返回
        return {
          rowspan: 2,
          colspan: 1
        }
    是把当前的一个单元格和正下方的单元格合并
    且
    下一个单元格要返回
        return {
          rowspan: 0,
          colspan: 0
        }
     这是API给的
     我发现
     返回
         return {
          rowspan: 0,
          colspan: 1
        }
      也是可以的
      那合并单元格就十分容易了
      前提是数据已经根据id进行排序
     假如id为3的有四个数据
     只需要返回
     [4，1]
     [0，1]
     [0，1]
     [0，1]
     即可
     用下面的setrowspans方法进行处理即可
     */
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return {
          rowspan: row.rowspan,
          colspan: 1
        };
      }
    },
    setrowspans() {
      // 先给所有的数据都加一个v.rowspan = 1
      this.tableData.forEach(v => {
        v.rowspan = 1;
      });
      // 双层循环
      for (let i = 0; i < this.tableData.length; i++) {
        // 内层循环，上面已经给所有的行都加了v.rowspan = 1
        // 这里进行判断
        // 如果当前行的id和下一行的id相等
        // 就把当前v.rowspan + 1
        // 下一行的v.rowspan - 1
        for (let j = i + 1; j < this.tableData.length; j++) {
          //此处可根据相同字段进行合并，此处是根据的id
          if (this.tableData[i].id === this.tableData[j].id) {
            this.tableData[i].rowspan++;
            this.tableData[j].rowspan--;
          }
        }
        // 这里跳过已经重复的数据
        i = i + this.tableData[i].rowspan - 1;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
</style>