vue+element实现表格合并

主要使用element-ui中的el-table中有个方法叫做span-method

通过这个方法可以实现表格行合并

实现思路；

通过对数据进行一个加工在每一条数据中加入向下合并多少的标识再通过span-method方法来实现合并

示例：

<template>
  <div>
    <!-- 表格自带方法 span-method -->
    <el-table :data="tableData" border :span-method="objectSpanMethod">
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="爱好" prop="hosbity"></el-table-column>
      <el-table-column label="手机号" prop="tel"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          userId: "1",
          name: "张森",
          hosbity: "打篮球",
        },
        {
          userId: "1",
          name: "张森",
          hosbity: "唱歌",
        },
        {
          userId: "1",
          name: "张森",
          hosbity: "嘻哈",
        },
        {
          userId: "2",
          name: "三木",
          hosbity: "唱歌",
        },
        {
          userId: "2",
          name: "三木",
          hosbity: "打篮球",
        },
        {
          userId: "3",
          name: "木子",
          hosbity: "唱歌",
        },
        {
          userId: "4",
          name: "左进",
          hosbity: "唱歌",
        },
        {
          userId: "4",
          name: "左进",
          hosbity: "rap",
        },
        {
          userId: "4",
          name: "左进",
          hosbity: "打篮球",
        },
      ],
    };
  },
  components: {},
  computed: {},

  //方法集合
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return row.spanObj;
      }
    },
  },
  mounted() {
    //我设置的数据是否合并的标识是userId  这里可以根据实际情况 做调整

    let flag = 0; //标记第一个
    let i = 0; //标记需要合并几行
    this.tableData.forEach((item, index, arr) => {
      //默认每行都和并没有了 00
      item.spanObj = {
        rowspan: 0,
        colspan: 0,
      };
      // 判断是不是第一个 如果是第一个记录flag 默认合并一个
      if (index - 1 < 0 || item.userId != arr[index - 1].userId) {
        flag = index;
        i = 1;
      }
      // 判断这一个跟上一个是不是一样  如果一样 那么就i++
      if (arr[index - 1] && item.userId == arr[index - 1].userId) {
        i++;
      }
      // 判断到头了吗 如果下一个areaId不存在 获取是现在这个跟下一个areaId不一样了那就给你一个赋值
      if (!arr[index + 1] || item.userId != arr[index + 1].userId) {
        arr[flag].spanObj = {
          rowspan: i,
          colspan: 1,
        };
      }
    });
  },
};
</script>