html怎么让表格连接数据库,【前端】如何将html的table空白单元格合并?数据是循环从数据库里面读取的。...
網頁中的展示效果如圖所示。
數據是從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()
},
}
總結
以上是生活随笔為你收集整理的html怎么让表格连接数据库,【前端】如何将html的table空白单元格合并?数据是循环从数据库里面读取的。...的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: html h1转换为行内,css中转换为
- 下一篇: qt百度地图html,Qt的QWebCh