ElementUI table合并单元格

element-ui Table如何合并单元格

我这里的需求是在懒加载的数据中从 管理员 开始的3列合并, 跟进任务量 开始的3列合并
在这里插入图片描述

合并单元格其实是占位,所以清除单元格一定要做

row 为行数据,column 为列数据,rowIndex 为行索引,columnIndex 为列索引

	<el-table :span-method="arraySpanMethod"></el-table>

    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      // row为行数据,column为列数据,rowIndex 为行索引,columnIndex 为列索引
      // console.log(row, column, rowIndex, columnIndex);
      let addArr = ["管理员", "跟进任务量"];
      let delArr = [
        "总服务用户量",
        "当前在学服务人数",
        "任务处理量",
        "任务处理量",
      ];
      // 判断该行是否有子级独有id
      if (row.teachingAffairsProjectId) {
      	// label匹配则开始合并
        if (addArr.includes(column.label)) {
          return {
            // 占位(合并单元格)
            rowspan: 1, // 行
            colspan: 3, // 列
          };
        } else if (delArr.includes(column.label)) {
          return [0, 0]; // 清除单元格(一定要做)
        }
      }
    },

你可能感兴趣的:(Vue,vue.js,前端,elementui)