动态获取数据合并el-row和el-col

AYBAIWAN

已于 2023-08-15 23:06:01 修改

阅读量1.2k

点赞数

文章标签： vue.js

于 2023-07-27 17:16:05 首次发布

本文链接：https://blog.youkuaiyun.com/aybaiwan/article/details/131964725

版权

原本后台返回数据都是各自独立，互不影响的，数据结构如图：

[{
                       "mainContent": "AA",
                      "secondContent": "b",
                      "testProject": "日常运行",
                      "result": "",
                      "note": ""
                      },
                      {
                      "mainContent": "AA",
                      "secondContent": "b",
                      "testProject": "哈哈哈哈哈哈哈哈哈哈",
                      "result": "",
                      "note": ""
                      },
					  {
                      "mainContent": "AA",
                      "secondContent": "c",
                      "testProject": "哈哈哈哈哈哈哈哈哈哈",
                      "result": "",
                      "note": ""
                      }
]

若是一条一条数据显示出来是这样的：

想要实现相同内容合并,如图:

关键点在于，将原本没有关系的一条一条的数据进行相应处理，就是改变一下数据结构（如果后台可以给你提供理想的数据结构就不用改了，直接用），这里主要是写如何让前端自己处理数据，实现动态合并。

想要的数据结构为：

解释一下：就是将mainContent相同的数据单独提取出来，到时候页面显示就显示一条，而这条mainContent的行高需要动态渲染，依据mainContent相同的数据的条数（length1）。

若secondContent也相同，也需要合并，将secondContent单独提取出来，里面存放对应的每条需要合并的内容（content），secondContent的行高需要动态渲染，依据content相同数据的条数（length）。

具体的后台返回数据不变，到时候直接遍历显示就好。

{
  "head": [
    {
      "projectName": "热介质锅炉年度检验报告",
      "mainContent": "安全附件和仪表",
      "length1": "4",
      "secondContent": [
        {
          "content": "安全阀",
          "length": "2"
        },
        {
          "content": "压力表",
          "length": "2"
        }
      ],
      "data": [
        {
          "mainContent": "AA",
          "secondContent": "b",
          "testProject": "日常运行",
          "testResult": "",
          "testRemark": ""
        },
        {
          "mainContent": "AA",
          "secondContent": "b",
          "testProject": "安全阀是否在检验有效期",
          "testResult": "",
          "testRemark": ""
        },
        {
          "mainContent": "AA",
          "secondContent": "c",
          "testProject": "是否泄露",
          "testResult": "",
          "testRemark": ""
        },
        {
          "mainContent": "AA",
          "secondContent": "c",
          "testProject": "外观",
          "testResult": "",
          "testRemark": ""
        }
      ]
    },
    {
      "mainContent": "安全管理情况",
      "length1": "4",
      "data": [
        {
          "mainContent": "AA",
          "secondContent": "b",
          "testProject": "锅炉日常运行记录是否齐全",
          "testResult": "",
          "testRemark": ""
        },
        {
          "mainContent": "AA",
          "secondContent": "c",
          "testProject": "哈哈哈哈哈哈哈哈哈哈",
          "testResult": "",
          "testRemark": ""
        },
        {
          "mainContent": "AA",
          "secondContent": "c",
          "testProject": "哈哈哈哈哈哈哈哈哈哈",
          "testResult": "",
          "testRemark": ""
        },
        {
          "mainContent": "AA",
          "secondContent": "c",
          "testProject": "哈哈哈哈哈哈哈哈哈哈",
          "testResult": "",
          "testRemark": ""
        }
      ]
    }
  ]
}

部分页面代码：

<el-row class="b3" v-for="(item,index) in this.form.head" :key="index"
                                :style="{height:px(item.length1)}">
                            <el-col :span="item.secondContent?2:3" class="bdr"
                                    :style="{height:px(item.data.length),lineHeight:px(item.data.length)}">
                                <span style="line-height: normal">{{item.mainContent}}</span>
                            </el-col>
                            <el-col :span="1" :style="{height:px(item.length1)}"
                                    v-if="item.secondContent">
                                <el-row v-for="(item2,index2) in item.secondContent" :key="index2">
                                    <el-col class="bdr bdb"
                                            :style="{height:px(item2.length),lineHeight:px(item2.length)}">
                                        <span>{{item2.content}}</span>
                                    </el-col>
                                </el-row>
                            </el-col>
</el-row>

关键点在于样式的动态显示，如：:style="{height:px(item.length1)}

最终实现效果：