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",
        },
        // 可以继续添加更多的数据行
      ],
相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
coderlin_3 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜4 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD4 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding4 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空4 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui