vue1111111

最新推荐文章于 2024-06-26 09:51:03 发布

学后端的小明同学

最新推荐文章于 2024-06-26 09:51:03 发布

阅读量73

点赞数 2

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_51330350/article/details/137641324

版权

<template>
  <div class="container">
    <!-- 一级表格 -->
    <el-row class="level-one" :span="24">
      <el-col :span="24">
        <el-form-item label="Carcass_Param" border>
          <el-input v-model="formData.carcassParam" placeholder="Enter value"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <!-- 二级表格 -->
    <el-row v-for="(field, index) in secondaryFields" :key="index" class="level-two" :span="24">
      <el-col :span="24">
        <el-form-item :label="field.label" border>
          <el-input v-model="formData[field.key]" placeholder="Enter value"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        carcassParam: '', // Carcass_Param 字段对应的数据
        // 其他字段...
      },
      secondaryFields: [
        { label: 'param_layout_carcass_PEQ_R1', key: 'param_layout_carcass_PEQ_R1' },
        // 其他二级字段...
      ]
    };
  }
};
</script>

<style scoped>
.container {
  width: 100%;
}

.level-one .el-form-item {
  margin-bottom: 0;
  border-bottom: 1px solid #e0e0e0;
}

.level-two .el-form-item {
  margin-left: 20px; /* 二级表格的缩进 */
  margin-bottom: 0;
  border-bottom: 1px solid #e0e0e0;
}
</style>