最麻烦的还是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",
},
// 可以继续添加更多的数据行
],