博客内容讲述了如何从MongoDB获取数据并在网页上利用Swig模板引擎进行展示。通过for循环遍历数据，并讨论了如何处理空白单元格，实现类似表格的合并效果。提供的代码示例展示了如何通过数据转换，将具有相同列属性的数据分组，以达到合并的目的。
网页中的展示效果如图所示。
数据是从MongoDB里面读取的，在网页的展示方式是使用swig模板引擎，for循环遍历展示的。
伪代码如下：
for info in dbInfo
{info.cellValue}end for
请教，如何做到将空白的单元格合并成如图所示(其实就是将这组标题合并在一起)：
使用比如layui或者bootstrap有方法吗？
求各位前辈指教。
回答：
将数据按照行 相同列属性进行分组
| {{row.col1}} | {{row.col2}} | {{row.col3}} |
export default {
data() {
return {
list: [
{ col1: 'text1', col2: "info1", col3: 'xxx' },
{ col1: 'text1', col2: "info1", col3: 'xxx' },
{ col1: 'text1', col2: "info1", col3: 'xxx' },
{ col1: 'text1', col2: "info1", col3: 'xxx' },
{ col1: 'text2', col2: "info2", col3: 'xxx' },
{ col1: 'text2', col2: "info2", col3: 'xxx' },
{ col1: 'text2', col2: "info2", col3: 'xxx' },
{ col1: 'text3', col2: "info3", col3: 'xxx' },
{ col1: 'text3', col2: "info3", col3: 'xxx' },
{ col1: 'text3', col2: "info3", col3: 'xxx' },
{ col1: 'text3', col2: "info3", col3: 'xxx' },
],
afterList: []
}
},
methods: {
// 数据转换
tansList () {
this.afterList = Object.values(this.list.reduce((temp, item) => {
if( temp[item.col1] ) {
temp[item.col1].push(item)
}else {
temp[item.col1] = [item]
}
return temp
},{}))
console.log(this.afterList);
}
},
mounted() {
this.tansList()
},
}
回答：
扫一扫
1414
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
