element table 合并表头合并列合并行

最新推荐文章于 2025-09-30 11:20:41 发布

原创最新推荐文章于 2025-09-30 11:20:41 发布 · 1.9k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #javascript #js

本文记录了使用Element UI实现表格合并的过程，包括表头、行和列的合并。在实践中遇到诸多问题，通过处理数据和调整CSS解决了这些问题。提供了示例代码和数据格式说明。

记录一下首次合并表格。

遇到了很多坑，这是解决后的代码

ui的设计图（也是最终效果啦）

element 的table：

 <div class="category">
      <el-table
        :data="alldata"
        :span-method="arraySpanMethod"
        :header-row-style="{ height: '56px', background: '#E5E5E5' }"
        :header-cell-style="tableHeaderColor"
        border
        style="width: 100%; margin-top: 5px"
      >
        
        <el-table-column prop label="设备未知" align="center">
          <template>
            <el-table-column prop="category"></el-table-column>
            <el-table-column prop="activityName"></el-table-column>
            <el-table-column prop="message"></el-table-column>
          </template>
       
        </el-table-column>
         <el-table-column prop="value" label="数字A"> </el-table-column>
        <el-table-column prop="value" label="数字B"> </el-table-column>
        <el-table-column prop="value" label="数字C"> </el-table-column>
        <el-table-column prop="value" label="数字D"> </el-table-column>
        <el-table-column prop="value" label="数字E"> </el-table-column>
        <el-table-column prop="value" label="数字F"> </el-table-column>
    
      </el-table>
    </div>

js：data的数据格式

 data() {
    return {
     
      list: [
        {
          id: "16EE8A54E6917F6479905CDC5B031F22",
          activityPointsDOS: [
            {
              id: "16EE8A54E0C17F647404A2DC7783EE88",
              activityPointsDOS: [
                {
                  id: "1",
                  value: "6",
                  activityName: "坚定政治立场。",
                  message: " （1）牢固树立“四个意识”巴拉巴拉",
                  period: "19上半年",
                },
                {
                  id: "2",
                  value: "8",
                  activityName: "坚定政治立场。",
                  message: "（2）严格遵守政治纪律和政治规矩.巴拉啦",
                  period: "19上半年",
                },
              ],
              activityName: "1. 坚定政治立场。(10分)",
            },
            {
              id: "16EE8A54E4817F64779EF35CC6671C10",
              activityPointsDOS: [
                {
                  id: "3",
                  value: "7",
                  activityName: "坚持学习提高。",
                  message: "（1）及时认真参加支部集体学习....",
                  period: "19上半年",
                },
                {
                  id: "4",
                  value: "3",
                  activityName: "坚持学习提高。",
                  message: "（2）每年集中学习培训....",
                  period: "19上半年",
                },
                {
                  id: "5",
                  value: "5",
                  activityName: "坚持学习提高。",
                  message: "（3）有取得更高....位",
                  period: "19上半年",
                },
              ],
              activityName: "2.坚持学习提高。(6分)",
            },
            {
              id: "16EE8A54E4817F64779EF35CC6671C10",
              activityPointsDOS: [
                {
                  id: "6",
                  value: "7",
                  activityName: "严格组织生活。",
                  message: "（1）按季度.....",
                  period: "19上半年",
                },
                {
                  id: "7",
                  value: "3",
                  activityName: "严格组织生活。",
                  message: "（2）按时上党课.......。",
                  period: "19上半年",
                },
                {
                  id: "8",
                  value: "5",
                  activityName: "坚持学习提高。",
                  message: "（3）积极参加",
                  period: "19上半年",
                },
              ],
              activityName: "3.严格组织生活。(13分)",
            },
          ],
          category: "合格积分\r\n(40分)",
        },
        {
          id: "16EE8A54FF617F6491391BD04A0D4E7F",
          activityPointsDOS: [
            {
              id: "16EE8A54EA517F647D257760897C805F",
              activityPointsDOS: [
                {
                  id: "8",
                  value: "10",
                  activityName: "1.所在基层党组织情况。（10分）",
                  message: " (1) 根据所在.....",
                  period: "19上半年",
                },
              ],
              activityName: "1.所在基层党组织情况。（10分）",
            },
            {
              id: "16EE8A54E8517F647B3DE374CF0D6D93",
              activityPointsDOS: [
                {
                  id: "10",
                  value: "3",
                  activityName: "2.年度评议、考核情况。（10分）",
                  message: " (1) 在党建....",
                  period: "19上半年",
                },
                {
                  id: "9",
                  value: "10",
                  activityName: "2.年度评议、考核情况。（10分）",
                  message:
                    " (2）在年度.........................................................................",
                  period: "19上半年",
                },
              ],
              activityName: "2.年度评议、考核情况。（10分）",
            },
          ],
          category: "综合积分\r\n（20分）",
        },
        {
          id: "16EE8A54FF617F6491391BD04A0D4E8F",
          activityPointsDOS: [
            {
              id: "16EE8A54EA517F647D257760897C805F",
              activityPointsDOS: [
                {
                  id: "8",
                  value: "100000",
                  // activityName: "1.所在基层党组织情况。（10分）",
                  // message: " (1) 根据所在.....",
                  period: "19上半年",
                },
              ],
              // activityName: "1.所在基层党组织情况。（10分）",
            },
          ],
          category: "积分\r\n（20分）",
        },
      ],
    
    };
}

数据处理：

created() {
    // 二次处理数据
    this.alldata = this.handleTableArr(this.list);
    console.log(this.alldata);
  },

methods: {
// 解析数据
    handleTableArr(data) {
      let arr = [];
      for (let i = 0; i < data.length; i++) {
        let category_info = data[i];
        let activityPointsDOS = category_info["activityPointsDOS"];
        let count = 0;
        for (let j = 0; j < activityPointsDOS.length; j++) {
          let activityTwo_info = activityPointsDOS[j];
          let activityTwo_activityPointsDOS =
            activityPointsDOS[j]["activityPointsDOS"];
          for (let k = 0; k < activityTwo_activityPointsDOS.length; k++) {
            count++;
            let info = {
              // 确定每天数据的 合并行的数量
              span_num: k === 0 ? activityTwo_activityPointsDOS.length : 0,
              value: activityTwo_activityPointsDOS[k]["value"],
              message: activityTwo_activityPointsDOS[k]["message"],
              activityName: activityTwo_info["activityName"],
              category: category_info["category"],
            };
            arr.push(info);
          }
        }
        // 第一列的合并数量, 赋值给每个大项的第一个单元格. 比如合格积分要合并 8 行.
        arr[arr.length - count]["count"] = count;
      }
      return arr;
    },
}

合并表格和合并表头：

// 表格合并的方法
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      console.log(row, "row");

 // row: 行，column：列；rowIndex：第几行；columnIndex：第几列
      // rowspan: 行宽；colspan: 列宽
      if (rowIndex === this.alldata.length - 1) {
        if (columnIndex === 0) {
          return {
             rowspan: 1,
             colspan: 3
          }
        }else if (columnIndex === 1) {
                    // 删除第二列
                    return [0, 0];
                }else if (columnIndex === 2) {
                    // 删除第二列
                    return [0, 0];
                }
      } else {
        if (columnIndex === 0) {
          if (row.count) {
            return [row.count, 1];
          } else {
            return [0, 0];
          }
        }
         // 第二列
      if (columnIndex === 1) {
        if (row.span_num > 0) {
          return [row.span_num, 1];
        } else {
          return [0, 0];
        }
      }
      }
    },
    // 表头合并的方法
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      console.log(row, "row");
      // 第一列
      if (rowIndex === 0) {
        // if(columnIndex === 1) {
        this.$nextTick(() => {
          console.log(document.getElementsByClassName(column.id).length, "行");

          if (document.getElementsByClassName(column.id).length !== 0) {
            console.log(rowIndex, columnIndex, "行");
            document
              .getElementsByClassName(column.id)[0]
              .setAttribute("rowspan", 3);
            return false;
          }
        });
        console.log(column);
        return column;
        // }
        // return 'height:40px!important;line-height:40px!important;'
      }
    },

css：


<style lang="scss" scope>
.category {
  width: 100%;
  .el-table tr {
    height: 28px !important;
  }
  .el-table--border th {
    border-bottom: 2px solid #ffffff;
  }
  .el-table--medium th,
  .el-table--medium td {
    padding: 0px 0;
  }
  .el-table th > .cell {
    font-size: 14px;
    line-height: 13px;
    // height: 61px;
  }

  .el-table__header-wrapper {
    height: 56px !important;
  }
  .el-table thead.is-group th {
    height: 24px !important;
  }
  .el-table .cell {
    padding: 5px;
  }
  .el-table thead.is-group th {
    background: #e5e5e5;
  }
}


</style>

合并列后多出两列tb的参考链接：Element表格之表头合并、行合并和列合并_rayong的博客-优快云博客_element 合并表头