element-ui表格，el-table多级合并行

记录关于element表格合并的多级行

不墨迹，上效果图

实现方法及完整代码

注：主要还是在数据操作这一块，对拿到的tableData的数据进行操作和:span-method="objectSpanMethod"方法

配合两张图再对着代码，仔细理解下，很容易。数据可以让后端直接做好给你。但你要跟他讲清楚。想要的是什么，一定要讲清楚！

<template>
  <div>

    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"//重点
      border
      style="width: 100%; margin-top: 20px">
      <el-table-column
        prop="userName"
        label="组织A"
        width="180">
      </el-table-column>
      <el-table-column
        prop="relationship"
        label="组织B"
        width="180">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="组织C"
        width="180">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [
          {
            userName: "A用户",
            //num 第一列需要合并的标识，
            //例如：合并三行，那么num=3，接着下面2条数据里num=0.
            //如果是num=4，下面3条数据就是num=0。
            //不合并就是num=1，num1=1
            num: 3,

            //num1 第二列需要合并的标识，数据规则同第一列
            num1: 2,
            phone: "123",
            relationship: "关系1"
          },
          {
            userName: "A用户",
            num: 0,
            num1: 0,
            phone: "456",
            relationship: "关系1"
          },
          {
            userName: "A用户",
            num: 0,
            num1: 1,
            phone: "789",
            relationship: "关系2"
          },
          {
            userName: "B用户",
            num: 1,
            num1: 1,
            phone: "101112",
            relationship: "关系3"
          },
        ]
      };
    },
    methods: {
        //主要方法
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        //通过columnIndex来判断当前合并列，相当于列的index
        for (let i = 0; i < this.tableData.length; i++) {
          if( columnIndex === 0 ){
            if (row.num > 0 ) {
              return {
                //rowspan: row.num,就是动态合并的第一列行数
                rowspan: row.num,
                colspan: 1
              };
            } else {
              return {
                rowspan: 0,
                colspan: 0
              };
            }
          }
          if( columnIndex === 1 ){
            if (row.num1 > 0) {
              return {
                //rowspan: row.num1,就是动态合并的第二列行数
                rowspan:  row.num1,
                colspan: 1
              };
            } else {
                return {
                  rowspan: 0,
                  colspan: 0
                };
            }
          }
        //columnIndex也可可以动态这边目前是固定的，可以根据需求来自定义
        }
      }
    }
  };
</script>

欢迎指正交流