el-table进阶（每条数据分行或合并）

最麻烦的还是css样式，表格样式自己调吧

html 复制代码

<!-- ------------------------------------------------------------------------------------------------------根据数据拓展表格------------------------------------------------------------------------------------------------------ -->
<div style="display: flex">
  <div style="width: 100px">
    <div
      style="
        height: 41px;
        border: 1px solid #8f8e8e;
        border-right: none;
        background-color: #555555;
      "
    ></div>
    <div
      class="runwayState"
      style="
        border: 1px solid #8f8e8e;
        border-right: none;
        height: 100%;
        display: flex;
      "
    >
      使用跑道 灯光情况
    </div>
  </div>
  <div style="flex: 1">
    <el-table :data="tableData" style="width: 100%" class="custom-table">
      <el-table-column label="使用跑道" width="150">
        <template slot-scope="scope">
          <el-row>
            <el-col :span="6">
              <div>起</div>
            </el-col>
            <el-col :span="18">
              <div>
                <el-form-item :prop="'way' + scope.$index + '_3'">
                  <el-input
                    v-model="scope.row['way' + scope.$index + '_3']"
                    maxlength="10"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <div>降</div>
            </el-col>
            <el-col :span="18">
              <div>
                <el-form-item :prop="'way' + scope.$index + '_3'">
                  <el-input
                    v-model="scope.row['way' + scope.$index + '_3']"
                    maxlength="10"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </template>
      </el-table-column>

      <!-- 坡度灯列 -->
      <el-table-column label="坡度灯">
        <template slot-scope="scope">
          <el-row>
            <el-col :span="24">
              <div>
                <el-form-item :prop="'way' + scope.$index + '_3'">
                  <el-input
                    v-model="scope.row['way' + scope.$index + '_3']"
                    maxlength="3"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div>
                <el-form-item :prop="'way' + scope.$index + '_4'">
                  <el-input
                    v-model="scope.row['way' + scope.$index + '_4']"
                    maxlength="3"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </template>
      </el-table-column>

      <!-- 进近灯列 -->
      <el-table-column label="进近灯">
        <template slot-scope="scope">
          <el-row>
            <el-col :span="24">
              <div>
                <el-form-item :prop="'way' + scope.$index + '_5'">
                  <el-input
                    v-model="scope.row['way' + scope.$index + '_5']"
                    maxlength="3"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div>
                <el-form-item :prop="'way' + scope.$index + '_6'">
                  <el-input
                    v-model="scope.row['way' + scope.$index + '_6']"
                    maxlength="3"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </template>
      </el-table-column>

      <!-- 跑道灯列 -->
      <el-table-column label="跑道灯">
        <template slot-scope="scope">
          <el-row>
            <el-col :span="24">
              <div>
                <el-form-item :prop="'way' + scope.$index + '_7'">
                  <el-input
                    v-model="scope.row['way' + scope.$index + '_7']"
                    maxlength="3"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div>
                <el-form-item :prop="'way' + scope.$index + '_8'">
                  <el-input
                    v-model="scope.row['way' + scope.$index + '_8']"
                    maxlength="3"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </template>
      </el-table-column>

      <!-- 滑行灯列 -->
      <el-table-column label="滑行灯">
        <template slot-scope="scope">
          <el-row>
            <el-col :span="24">
              <div>
                <el-form-item :prop="'way' + scope.$index + '_9'">
                  <el-input
                    v-model="scope.row['way' + scope.$index + '_9']"
                    maxlength="3"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div>
                <el-form-item :prop="'way' + scope.$index + '_10'">
                  <el-input
                    v-model="scope.row['way' + scope.$index + '_10']"
                    maxlength="3"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </template>
      </el-table-column>

      <!-- 灯光科列 -->
      <el-table-column label="灯光科">
        <template slot-scope="scope">
          <el-form-item :prop="'way' + scope.$index + '_11'">
            <el-input
              v-model="scope.row['way' + scope.$index + '_11']"
              maxlength="3"
            ></el-input>
          </el-form-item>
        </template>
      </el-table-column>

      <!-- 气象列 -->
      <el-table-column label="AWOS旋钮">
        <template slot-scope="scope">
          <el-form-item :prop="'way' + scope.$index + '_12'">
            <el-input
              v-model="scope.row['way' + scope.$index + '_12']"
              maxlength="5"
            ></el-input>
          </el-form-item>
        </template>
      </el-table-column>

      <!-- 时间列 -->
      <el-table-column label="时间">
        <template slot-scope="scope">
          <el-form-item :prop="'way' + scope.$index + '_13'">
            <el-input
              v-model="scope.row['way' + scope.$index + '_13']"
              maxlength="5"
            ></el-input>
          </el-form-item>
        </template>
      </el-table-column>

      <!-- 签名列 -->
      <el-table-column label="签名">
        <template slot-scope="scope">
          <el-form-item :prop="'way' + scope.$index + '_14'">
            <el-input
              v-model="scope.row['way' + scope.$index + '_14']"
              maxlength="3"
            ></el-input>
          </el-form-item>
        </template>
      </el-table-column>
    </el-table>
  </div>
</div>

数据形式：

javascript 复制代码

     tableData: [
        {
          way0_1: "起",
          way0_2: "降",
          way0_3: "10",
          way0_4: "12",
          way0_5: "5",
          way0_6: "7",
          way0_7: "8",
          way0_8: "10",
          way0_9: "9",
          way0_10: "11",
          way0_11: "3",
          way0_12: "25°C",
          way0_13: "14:30",
          way0_14: "John",
        },
        {
          way1_1: "起",
          way1_2: "降",
          way1_3: "9",
          way1_4: "11",
          way1_5: "4",
          way1_6: "6",
          way1_7: "7",
          way1_8: "9",
          way1_9: "8",
          way1_10: "10",
          way1_11: "2",
          way1_12: "24°C",
          way1_13: "15:00",
          way1_14: "Alice",
        },
        {
          way2_1: "起",
          way2_2: "降",
          way2_3: "10",
          way2_4: "12",
          way2_5: "5",
          way2_6: "7",
          way2_7: "8",
          way2_8: "10",
          way2_9: "9",
          way2_10: "11",
          way2_11: "3",
          way2_12: "25°C",
          way2_13: "14:30",
          way2_14: "John",
        },
        // 可以继续添加更多的数据行
      ],