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

本文主要是介绍el-table进阶（每条数据分行或合并），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

<!-- ——————————————————————————————————根据数据拓展表格—————————————————————————————————— -->
<div style="display: flex"><div style="width: 100px"><divstyle="height: 41px;border: 1px solid #8f8e8e;border-right: none;background-color: #555555;"></div><divclass="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-inputv-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-inputv-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-inputv-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-inputv-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-inputv-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-inputv-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-inputv-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-inputv-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-inputv-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-inputv-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-inputv-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-inputv-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-inputv-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-inputv-model="scope.row['way' + scope.$index + '_14']"maxlength="3"></el-input></el-form-item></template></el-table-column></el-table></div>
</div>

数据形式：

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