博客

工作中经常会遇到需要将表格合并的需求,elementUI官方文档也有对应的方法,但是不够详细,发个贴记录一下学习之路

通过给



table



传入



span-method



方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行



row



、当前列



column



、当前行号



rowIndex



、当前列号



columnIndex



四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表



rowspan



，第二个元素代表



colspan



。 也可以返回一个键名为



rowspan



和



colspan



的对象。

html部分没有什么写的 照着文档搬就行了

<el-table
        class="table"
        :data="data"
        border
        style="width: 100%"
        size="mini"
        :header-cell-style="headerStyle"
        :cell-style="cellStyle"
        height="37rem"
        :span-method="objectSpanMethod"
      >
        <el-table-column label="本周签到表(06.27-07.01)" align="center">
          <el-table-column
            :prop="key.value"
            :label="key.label"
            v-for="(key, index1) in tableheader"
            :key="index1"
            align="center"
            :width="index1 == 0 ? 120 : ''"
            :formatter="index1 == 3 ? valformat : format"
          >
          </el-table-column>
        </el-table-column>
      </el-table>

首先需要在data里面声明两个变量用来保存合并的数据

data(){
    return{
        span:[],
        index:null
    }
}

然后就是写一个方法 遍历数据,得到需要合并的行数据,

// 获取需要合并的数据
getSpanArr(data) {
        // data就是我们从后台拿到的数据
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.span.push(1);
          this.index= 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].date === data[i - 1].date) {
            this.span[this.index] += 1;
            this.span.push(0);
          } else {
            this.span.push(1);
            this.index= i;
          }
        }
      }
    },

// 表格合并行方法
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.span[rowIndex];
        return {
          // [0,0] 表示这一行不显示， [2,1]表示行的合并数
          rowspan: _row,
          colspan: 1
        };
      }
    },

最后是效果图

我只提供了方法,具体使用看个人需求 稍加改造即可