合并table-EW帮帮网

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>玻璃样品检测数据表</title>

    <link rel="stylesheet" href="./vue/element_ui.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <script src="./vue/unocss.js"></script>
    <script src="./vue/vue.js"></script>
    <script src="./vue/element_ui.js"></script>
    <style>
      .el-table .warning-row {
        background: #fdf6ec;
      }
      .el-table .success-row {
        background: #f0f9eb;
      }
      .el-table__header th {
        background-color: #f5f7fa !important;
        color: #606266;
        font-weight: bold;
      }
      .position-cell {
        font-weight: bold;
        color: #409eff;
      }
      .summary-cell {
        font-weight: bold;
        color: #303133;
        background-color: #f5f7fa;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="p-20px">
        <el-table
          :data="tableData"
          :span-method="objectSpanMethod"
          border
          stripe
        >
          <!-- 产线列 -->
          <el-table-column prop="locLine" label="产线" align="center">
          </el-table-column>

          <!-- 厚度列 -->
          <el-table-column prop="thickness" label="厚度" align="center">
            <template #default="{row}"> {{ row.thickness }}mm </template>
          </el-table-column>

          <!-- 位置列 -->
          <el-table-column prop="location" label="位置" align="center">
          </el-table-column>

          <!-- 锡计数列 -->
          <el-table-column prop="measureSnNum" label="锡计数" align="center">
            <template #default="{row}">
              <el-tooltip :content="row.ceshi" placement="top">
                <div>{{ row.measureSnNum }}</div>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            tableData: [],
          };
        },

        created() {
          // 初始化表格数据
          this.initTableData();
        },

        methods: {
          // 初始化表格数据
          initTableData() {
            const rawData = [
              // A线数据
              {
                locLine: "A线",
                thickness: 2.5,
                location: "前端",
                measureSnNum: 15,
                ceshi: 1,
              },
              {
                locLine: "A线",
                thickness: 2.5,
                location: "前端",
                measureSnNum: 15,
                ceshi: 2,
              },
              {
                locLine: "A线",
                thickness: 2,
                location: "前端",
                measureSnNum: 18,
                ceshi: 3,
              },
              {
                locLine: "A线",
                thickness: 2.5,
                location: "中端",
                measureSnNum: 22,
                ceshi: 4,
              },
              {
                locLine: "A线",
                thickness: 3.0,
                location: "前端",
                measureSnNum: 16,
                ceshi: 5,
              },
              {
                locLine: "A线",
                thickness: 3.0,
                location: "前端",
                measureSnNum: 19,
                ceshi: 6,
              },
              // B线数据
              {
                locLine: "B线",
                thickness: 3,
                location: "前端",
                measureSnNum: 14,
                ceshi: 7,
              },
              {
                locLine: "B线",
                thickness: 2.0,
                location: "前端",
                measureSnNum: 17,
                ceshi: 8,
              },
              {
                locLine: "B线",
                thickness: 2.0,
                location: "前端",
                measureSnNum: 13,
                ceshi: 9,
              },
              {
                locLine: "B线",
                thickness: 2.0,
                location: "中端",
                measureSnNum: 21,
                ceshi: 10,
              },
              {
                locLine: "B线",
                thickness: 2.5,
                location: "后端",
                measureSnNum: 25,
                ceshi: 11,
              },
              {
                locLine: "B线",
                thickness: 2.5,
                location: "后端",
                measureSnNum: 28,
                ceshi: 12,
              },
            ];

            // 处理数据，添加合并信息
            this.tableData = this.processDataForMerge(rawData);
          },

          // 处理数据，为合并做准备
          processDataForMerge(data) {
            const processedData = [];

            for (let i = 0; i < data.length; i++) {
              const currentRow = { ...data[i] };

              // 初始化合并标记
              currentRow.locLineFirst = false;
              currentRow.thicknessFirst = false;
              currentRow.locationFirst = false;

              // 检查是否是产线的第一行
              if (i === 0 || data[i - 1].locLine !== currentRow.locLine) {
                currentRow.locLineFirst = true;
                // 计算产线合并行数
                let count = 1;
                for (let j = i + 1; j < data.length; j++) {
                  if (data[j].locLine === currentRow.locLine) {
                    count++;
                  } else {
                    break;
                  }
                }
                currentRow.locLineSpan = count;
              }

              // 检查是否是厚度的第一行
              if (
                i === 0 ||
                data[i - 1].locLine !== currentRow.locLine ||
                data[i - 1].thickness !== currentRow.thickness
              ) {
                currentRow.thicknessFirst = true;
                // 计算厚度合并行数
                let count = 1;
                for (let j = i + 1; j < data.length; j++) {
                  if (
                    data[j].locLine === currentRow.locLine &&
                    data[j].thickness === currentRow.thickness
                  ) {
                    count++;
                  } else {
                    break;
                  }
                }
                currentRow.thicknessSpan = count;
              }

              // 检查是否是位置的第一行
              if (
                i === 0 ||
                data[i - 1].locLine !== currentRow.locLine ||
                data[i - 1].thickness !== currentRow.thickness ||
                data[i - 1].location !== currentRow.location
              ) {
                currentRow.locationFirst = true;
                // 计算位置合并行数
                let count = 1;
                for (let j = i + 1; j < data.length; j++) {
                  if (
                    data[j].locLine === currentRow.locLine &&
                    data[j].thickness === currentRow.thickness &&
                    data[j].location === currentRow.location
                  ) {
                    count++;
                  } else {
                    break;
                  }
                }
                currentRow.locationSpan = count;
              }

              processedData.push(currentRow);
            }

            return processedData;
          },

          // 合并单元格方法
          objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
              // 产线列
              if (row.locLineFirst) {
                return {
                  rowspan: row.locLineSpan,
                  colspan: 1,
                };
              } else {
                return {
                  rowspan: 0,
                  colspan: 0,
                };
              }
            } else if (columnIndex === 1) {
              // 厚度列
              if (row.thicknessFirst) {
                return {
                  rowspan: row.thicknessSpan,
                  colspan: 1,
                };
              } else {
                return {
                  rowspan: 0,
                  colspan: 0,
                };
              }
            } else if (columnIndex === 2) {
              // 位置列
              if (row.locationFirst) {
                return {
                  rowspan: row.locationSpan,
                  colspan: 1,
                };
              } else {
                return {
                  rowspan: 0,
                  colspan: 0,
                };
              }
            }
          },
        },
      });
    </script>
  </body>
</html>
合并table

网站公告

今日签到

热门文章

最新发布
