动态获取数据渲染到页面上，不使用el-table，使用的布局是el-row和el-col，实现布局，如何将相同行，以及依赖相同行的相同行合并，有点绕，看代码吧，有兴趣的朋友也可以一起探讨呀。比心
现在页面是这样的：
想实现将红框中数据合并：
我已经对后台数据做了一些处理，将数据根据secondContent（二级检验内容）分为：
有children 的和 没有children 的。
先看后台返回的数据结构：
这是主要代码
<div class="container">
<div class="right">
<el-row class="b3">
<el-col :span="3" class="info info2 bdt"><span>检验内容</span></el-col>
<el-col :span="14" class="info info2 bdt"><span>检验项目</span></el-col>
<el-col :span="2" class="info info2 bdt"><span>检查结果</span></el-col>
<el-col :span="5" class="info info2 bdt"><span>备注</span></el-col>
</el-row>
<!-- 具体数据 -->
<!-- 有孩子的-->
<el-row class="b3" v-for="(item,index) in form.arrHasChildren" :key="index">
<!-- 检验内容-->
<el-col :span="3" class="info info2"
style="height:50px;display: flex">
<el-row class="b3 bdr" style="width: 50%;line-height: initial;">
<span>{{item.mainContent}}</span>
</el-row>
<el-row class="b3 bdr" style="width: 50%;line-height: initial;">
<span>{{item.secondContent}}</span>
</el-row>
</el-col>
<!-- 检验项目-->
<el-col :span="14" class="info info2">
<span>{{item.testProject}}</span>
</el-col>
<!-- 结果-->
<el-col :span="2" class="info info2">
<span>{{item.result}}</span>
</el-col>
<!-- 备注-->
<el-col :span="5" class="info info2">
<span>{{item.note}}</span>
</el-col>
</el-row>
<!-- 没有孩子-->
<el-row class="b3" v-for="(item,index) in form.arrNoChildren" :key="index">
<!-- 检验内容-->
<el-col :span="3" class="info info2">
<el-row class="b3">
<el-col><span>{{item.mainContent}}</span></el-col>
</el-row>
</el-col>
<!-- 检验项目-->
<el-col :span="14" class="info info2">
<span>{{item.testProject}}</span>
</el-col>
<!-- 结果-->
<el-col :span="2" class="info info2">
<span>{{item.result}}</span>
</el-col>
<!-- 备注-->
<el-col :span="5" class="info info2">
<span>{{item.note}}</span>
</el-col>
</el-row>
</div>
</div>
后台数据是模拟的，所以朋友们不必关注请求问题
script代码：
<script src="./js/vue.js"></script>
<script src="./js/elementui.js"></script>
<script src="./js/vue-resource.min.js"></script>
<script>
new Vue({
el: '#app',
data: function () {
return {
form: {
testDate: [], //每条记录
arrHasChildren: [], //有孩子的
arrNoChildren: [], //没有孩子的
},
inputValue: '',
}
},
created() {
this.postMessage()
// window.callJsFunction = this.callJsFunction
},
methods: {
getMessage() {
this.$http.get('http://localhost:3003/report').then(function (result) {
console.log(result.body)
// console.log(this.form.arrHasChildren.length)
})
},
postMessage() {
this.$http.post('http://localhost:3003/report', {}).then(function (result) {
this.inputValue = result.body.ReportTitle
const data = result.body.data
this.form.testDate = data
let arrHasChildren = []
let arrNoChildren = []
for (let i = 0; i < this.form.testDate.length; i++) {
// let objHasChildren ={}
//有二级检验内容secondcontent的提取出来
if (this.form.testDate[i].secondContent !== '') {
arrHasChildren.push(this.form.testDate[i])
} else {
//没有的
arrNoChildren.push(this.form.testDate[i])
}
}
this.form.arrHasChildren = arrHasChildren
this.form.arrNoChildren = arrNoChildren
})
}
}
});
</script>
问题就是这样啦，我现在有一个想法，不知道行不行得通，讨论一下：
就是再改变一下数据结构，
分别对已经分了类的两组数据进行循环，
对于有children的数组：
1.设置一个新数组
2.每组数据从第二条数据开始，与上一条数据进行比较，判断mianContent的内容是否一样。
一样的话设置新对象将mianContent放进去，再放进新数组中。执行步骤3
不一样的话。执行步骤4
3.然后继续比较secondContent的内容是否一样。
一样的话设置新对象将secondContent放进去，并将这两条数据也放进去。执行步骤4
此时数结构希望是这样的：
javascript
[ {
"mainContent": "AA",
{
"secondContent": "b",
{
"mainContent": "AA",
"secondContent": "b",
"testProject": "日常运行",
"result": "",
"note": ""
},
{
"mainContent": "AA",
"secondContent": "b",
"testProject": "哈哈哈哈哈哈哈哈哈哈",
"result": "",
"note": ""
}
}
}
]
不一样的话也是设置一个新数组，但是此时是将这两条数据都放进去，不将secondContent单独提取出来。 执行步骤4
此时数结构希望是这样的：
[ {
"mainContent": "AA",
{
"mainContent": "AA",
"secondContent": "b",
"testProject": "日常运行哈d哈哈",
"result": "",
"note": ""
},
{
"mainContent": "AA",
"secondContent": "c",
"testProject": "日常运行哈d哈哈",
"result": "",
"note": ""
}
}
]
4.本次循环结束，当前这条数据将作为被比较对象，与下一条数据继续比较，也就是执行步骤2
5.最后根据输出的：已经提取出来了相同的部分，然后进行布局
目前就是这样了，我不知道这个想法行得通不，只是想，还不敢做，如果您有什么想法，可以在评论区下评论，或者私信我也可以哦！欢迎一起讨论，一起进步！
