網頁中的展示效果如圖所示。

數據是從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空白单元格合并？数据是循环从数据库里面读取的。...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。