el-table多级表头和列单元格合并

1、表格结构

<el-table
                :data="dialogForm.tableData"
                stripe
                :border="true"
                :span-method="arraySpanMethod"
              >
                <!-- 日期列 -->
                <el-table-column prop="time" label="日期" align="center" />

                <!-- 重要巡检点运行状态 -->
                <el-table-column label="重要巡检点运行状态">
                  <el-table-column label="储罐" align="center">
                    <el-table-column
                      prop="bbb"
                      :label="'压力\n（Mpa）'"
                      width="90"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <el-input
                          v-model="scope.row.bbb"
                          style="width: 100%"
                        ></el-input> </template
                    ></el-table-column>
                  </el-table-column>

                  <!-- 从“屏蔽泵”到“储气罐”的列 -->
                  <el-table-column prop="ccc" align="center" label="屏蔽泵">
                    <template slot-scope="scope">
                      <el-input
                        v-model="scope.row.ccc"
                        style="width: 100%"
                      ></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="1ccc" label="压注泵"></el-table-column>
                  <el-table-column prop="2ccc" label="计量间"></el-table-column>
                  <el-table-column
                    prop="3ccc"
                    label="配电设施"
                  ></el-table-column>
                  <el-table-column
                    prop="4ccc"
                    label="远程监控措施"
                  ></el-table-column>
                  <el-table-column
                    prop="5ccc"
                    label="高压管线"
                  ></el-table-column>
                  <el-table-column
                    prop="6ccc"
                    label="泄气装置"
                  ></el-table-column>
                  <el-table-column prop="7ccc" label="储气罐"></el-table-column>
                </el-table-column>

                <!-- CO₂浓度检测(PPM) -->
                <el-table-column label="CO₂浓度检测(PPM)">
                  <el-table-column prop="ddd" label="生活区">
                    <template slot-scope="scope">
                      <el-input
                        v-model="scope.row.ddd"
                        style="width: 100%"
                      ></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="eee" label="设备区">
                    <template slot-scope="scope">
                      <el-input
                        v-model="scope.row.eee"
                        style="width: 100%"
                      ></el-input>
                    </template>
                  </el-table-column>
                </el-table-column>

                <!-- 其他列 -->
                <el-table-column prop="fff" label="巡检人">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.fff"
                      style="width: 100%"
                    ></el-input> </template
                ></el-table-column>
                <el-table-column prop="ggg" label="备注"
                  ><template slot-scope="scope">
                    <el-input
                      v-model="scope.row.ggg"
                      style="width: 100%"
                    ></el-input>
                  </template>
                </el-table-column>
              </el-table>

2、数据结构

dialogForm: {
        tableData: [
          {
            time: "02:00",
            bbb: "2",
            ccc: "合并",
            ddd: "生活区",
            eee: "设备区",
            fff: "巡检人",
            ggg: "备注",
          },
          { time: "04:00" },
          { time: "06:00" },
          { time: "08:00" },
          { time: "10:00" },
          { time: "12:00" },
          { time: "14:00" },
          { time: "16:00" },
          { time: "18:00" },
          { time: "20:00" },
          { time: "22:00" },
          { time: "00:00" },
        ],
      },

3、单元格合并方法

arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 2) {
        return {
          //不做操作
          rowspan: 1, // 1行
          colspan: 8, // 第2列开始合并2列 【2,3】
        };
      } else if (columnIndex >= 3 && columnIndex <= 9) {
        return {
          //不做操作
          rowspan: 0,
          colspan: 0,
        };
      } else {
        return {
          rowspan: 1,
          colspan: 1,
        };
      }
    },

原文地址：https://blog.csdn.net/weixin_47218354/article/details/145134165

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！