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

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

    2. <div style="display: flex">
    3.   <div style="width: 100px">
    4.     <div
    5.       style="
    6.         height: 41px;
    7.         border: 1px solid #8f8e8e;
    8.         border-right: none;
    9.         background-color: #555555;
    10.       "
    11.     >div>
    12.     <div
    13.       class="runwayState"
    14.       style="
    15.         border: 1px solid #8f8e8e;
    16.         border-right: none;
    17.         height: 100%;
    18.         display: flex;
    19.       "
    20.     >
    21.       使用跑道 灯光情况
    22.     div>
    23.   div>
    24.   <div style="flex: 1">
    25.     <el-table :data="tableData" style="width: 100%" class="custom-table">
    26.       <el-table-column label="使用跑道" width="150">
    27.         <template slot-scope="scope">
    28.           <el-row>
    29.             <el-col :span="6">
    30.               <div>起div>
    31.             el-col>
    32.             <el-col :span="18">
    33.               <div>
    34.                 <el-form-item :prop="'way' + scope.$index + '_3'">
    35.                   <el-input
    36.                     v-model="scope.row['way' + scope.$index + '_3']"
    37.                     maxlength="10"
    38.                   >el-input>
    39.                 el-form-item>
    40.               div>
    41.             el-col>
    42.           el-row>
    43.           <el-row>
    44.             <el-col :span="6">
    45.               <div>降div>
    46.             el-col>
    47.             <el-col :span="18">
    48.               <div>
    49.                 <el-form-item :prop="'way' + scope.$index + '_3'">
    50.                   <el-input
    51.                     v-model="scope.row['way' + scope.$index + '_3']"
    52.                     maxlength="10"
    53.                   >el-input>
    54.                 el-form-item>
    55.               div>
    56.             el-col>
    57.           el-row>
    58.         template>
    59.       el-table-column>
    60.  
    61.       
    62.       <el-table-column label="坡度灯">
    63.         <template slot-scope="scope">
    64.           <el-row>
    65.             <el-col :span="24">
    66.               <div>
    67.                 <el-form-item :prop="'way' + scope.$index + '_3'">
    68.                   <el-input
    69.                     v-model="scope.row['way' + scope.$index + '_3']"
    70.                     maxlength="3"
    71.                   >el-input>
    72.                 el-form-item>
    73.               div>
    74.             el-col>
    75.           el-row>
    76.           <el-row>
    77.             <el-col :span="24">
    78.               <div>
    79.                 <el-form-item :prop="'way' + scope.$index + '_4'">
    80.                   <el-input
    81.                     v-model="scope.row['way' + scope.$index + '_4']"
    82.                     maxlength="3"
    83.                   >el-input>
    84.                 el-form-item>
    85.               div>
    86.             el-col>
    87.           el-row>
    88.         template>
    89.       el-table-column>
    90.  
    91.       
    92.       <el-table-column label="进近灯">
    93.         <template slot-scope="scope">
    94.           <el-row>
    95.             <el-col :span="24">
    96.               <div>
    97.                 <el-form-item :prop="'way' + scope.$index + '_5'">
    98.                   <el-input
    99.                     v-model="scope.row['way' + scope.$index + '_5']"
    100.                     maxlength="3"
    101.                   >el-input>
    102.                 el-form-item>
    103.               div>
    104.             el-col>
    105.           el-row>
    106.           <el-row>
    107.             <el-col :span="24">
    108.               <div>
    109.                 <el-form-item :prop="'way' + scope.$index + '_6'">
    110.                   <el-input
    111.                     v-model="scope.row['way' + scope.$index + '_6']"
    112.                     maxlength="3"
    113.                   >el-input>
    114.                 el-form-item>
    115.               div>
    116.             el-col>
    117.           el-row>
    118.         template>
    119.       el-table-column>
    120.  
    121.       
    122.       <el-table-column label="跑道灯">
    123.         <template slot-scope="scope">
    124.           <el-row>
    125.             <el-col :span="24">
    126.               <div>
    127.                 <el-form-item :prop="'way' + scope.$index + '_7'">
    128.                   <el-input
    129.                     v-model="scope.row['way' + scope.$index + '_7']"
    130.                     maxlength="3"
    131.                   >el-input>
    132.                 el-form-item>
    133.               div>
    134.             el-col>
    135.           el-row>
    136.           <el-row>
    137.             <el-col :span="24">
    138.               <div>
    139.                 <el-form-item :prop="'way' + scope.$index + '_8'">
    140.                   <el-input
    141.                     v-model="scope.row['way' + scope.$index + '_8']"
    142.                     maxlength="3"
    143.                   >el-input>
    144.                 el-form-item>
    145.               div>
    146.             el-col>
    147.           el-row>
    148.         template>
    149.       el-table-column>
    150.  
    151.       
    152.       <el-table-column label="滑行灯">
    153.         <template slot-scope="scope">
    154.           <el-row>
    155.             <el-col :span="24">
    156.               <div>
    157.                 <el-form-item :prop="'way' + scope.$index + '_9'">
    158.                   <el-input
    159.                     v-model="scope.row['way' + scope.$index + '_9']"
    160.                     maxlength="3"
    161.                   >el-input>
    162.                 el-form-item>
    163.               div>
    164.             el-col>
    165.           el-row>
    166.           <el-row>
    167.             <el-col :span="24">
    168.               <div>
    169.                 <el-form-item :prop="'way' + scope.$index + '_10'">
    170.                   <el-input
    171.                     v-model="scope.row['way' + scope.$index + '_10']"
    172.                     maxlength="3"
    173.                   >el-input>
    174.                 el-form-item>
    175.               div>
    176.             el-col>
    177.           el-row>
    178.         template>
    179.       el-table-column>
    180.  
    181.       
    182.       <el-table-column label="灯光科">
    183.         <template slot-scope="scope">
    184.           <el-form-item :prop="'way' + scope.$index + '_11'">
    185.             <el-input
    186.               v-model="scope.row['way' + scope.$index + '_11']"
    187.               maxlength="3"
    188.             >el-input>
    189.           el-form-item>
    190.         template>
    191.       el-table-column>
    192.  
    193.       
    194.       <el-table-column label="AWOS旋钮">
    195.         <template slot-scope="scope">
    196.           <el-form-item :prop="'way' + scope.$index + '_12'">
    197.             <el-input
    198.               v-model="scope.row['way' + scope.$index + '_12']"
    199.               maxlength="5"
    200.             >el-input>
    201.           el-form-item>
    202.         template>
    203.       el-table-column>
    204.  
    205.       
    206.       <el-table-column label="时间">
    207.         <template slot-scope="scope">
    208.           <el-form-item :prop="'way' + scope.$index + '_13'">
    209.             <el-input
    210.               v-model="scope.row['way' + scope.$index + '_13']"
    211.               maxlength="5"
    212.             >el-input>
    213.           el-form-item>
    214.         template>
    215.       el-table-column>
    216.  
    217.       
    218.       <el-table-column label="签名">
    219.         <template slot-scope="scope">
    220.           <el-form-item :prop="'way' + scope.$index + '_14'">
    221.             <el-input
    222.               v-model="scope.row['way' + scope.$index + '_14']"
    223.               maxlength="3"
    224.             >el-input>
    225.           el-form-item>
    226.         template>
    227.       el-table-column>
    228.     el-table>
    229.   div>
    230. div>

    数据形式：

    1.      tableData: [
    2.         {
    3.           way0_1: "起",
    4.           way0_2: "降",
    5.           way0_3: "10",
    6.           way0_4: "12",
    7.           way0_5: "5",
    8.           way0_6: "7",
    9.           way0_7: "8",
    10.           way0_8: "10",
    11.           way0_9: "9",
    12.           way0_10: "11",
    13.           way0_11: "3",
    14.           way0_12: "25°C",
    15.           way0_13: "14:30",
    16.           way0_14: "John",
    17.         },
    18.         {
    19.           way1_1: "起",
    20.           way1_2: "降",
    21.           way1_3: "9",
    22.           way1_4: "11",
    23.           way1_5: "4",
    24.           way1_6: "6",
    25.           way1_7: "7",
    26.           way1_8: "9",
    27.           way1_9: "8",
    28.           way1_10: "10",
    29.           way1_11: "2",
    30.           way1_12: "24°C",
    31.           way1_13: "15:00",
    32.           way1_14: "Alice",
    33.         },
    34.         {
    35.           way2_1: "起",
    36.           way2_2: "降",
    37.           way2_3: "10",
    38.           way2_4: "12",
    39.           way2_5: "5",
    40.           way2_6: "7",
    41.           way2_7: "8",
    42.           way2_8: "10",
    43.           way2_9: "9",
    44.           way2_10: "11",
    45.           way2_11: "3",
    46.           way2_12: "25°C",
    47.           way2_13: "14:30",
    48.           way2_14: "John",
    49.         },
    50.         // 可以继续添加更多的数据行
    51.       ],

  • 相关阅读:
    迷你无人车 Gazebo 仿真
    go拾遗(2)-函数返回数组、多个值、不显示指定返回
    制造业MES系统如何管理生产车间
    【docker】docker容器与服务器时间区不一样【已解决】
    vector的动态分配内存实验
    统信系统UOS桌面版V20 用户手册
    07-prometheus的自定义监控-pushgateway工具组件
    面试题54：浏览器/HTTP缓存机制
    2023下半年软考考后注意事项
    el-tree横向纵向滚动条
  • 原文地址：https://blog.csdn.net/qq_42192641/article/details/133647000