html怎么让表格连接数据库,【前端】如何将html的table空白单元格合并？数据是循环从数据库里面读取的。...

网页中的展示效果如图所示。

数据是从MongoDB里面读取的，在网页的展示方式是使用swig模板引擎，for循环遍历展示的。

伪代码如下：

for info in dbInfo

{info.cellValue}

end for

请教，如何做到将空白的单元格合并成如图所示(其实就是将这组标题合并在一起)：

使用比如layui或者bootstrap有方法吗？

求各位前辈指教。

回答

将数据按照行相同列属性进行分组

export default {

data() {

return {

list: [

{ col1: 'text1', col2: "info1", col3: 'xxx' },

{ col1: 'text2', col2: "info2", 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空白单元格合并？数据是循环从数据库里面读取的。...相关推荐

表格table及单元格合并
表格table 表格常用标签: table:表格 th:表头 tr:表格行 td:单元格数据注意:boder:1; 给表格加边框. 表格常用CSS样式: boder-collpase:collpas ...
html表格填充空白单元格,Excel表格数据录入：怎么快速填充所有空白单元格？
快速填充所有空白单元格在工作表中填充数据时,如果要填充的单元格具有某种特殊属性或单元格中数据具有特定的数据类型,还可以通过[定位条件]命令快速查找和选择目标单元格,然后输入内容. 例如,在招待费用统 ...
rowspan table布局_css如何实现table表格的单元格合并？colspan和rowspan合并单元格（实例）...
在前端开发中,html 表单是经常被使用到的,表单可以直观的把信息展现出来,有很好的交互功能:在表单中可以把同一类的信息合并在一起显示,这就需要把同一类的单元格合并在一起,那么怎样才能用css合并单元 ...
CSS-5 列表元素(ol+ul++li+dl+dt+dd)、表格元素、单元格合并、表单元素(input+label+radio+...)、Emmet语法、结构伪类(:nth-child）
目录 1_列表元素 1.1_列表的实现方式 1.2_有序列表 – ol – li 1.3_无序列表 – ul - li 1.4_定义列表 – dl – dt - dd 1.5_ 写前端代码逻辑顺序 2 ...
20120802-TableMerger前端纯js单元格合并
TableMerger前端纯js单元格合并 html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
成功解决在excel表格中仅在某列内插入一个空白单元格，使其下部的数据整体下移一格
成功解决在excel表格中仅在某列内插入一个空白单元格,使其下部的数据整体下移一格目录解决问题解决方法解决问题在excel表格中仅在某列内插入一个空白单元格,使其下部的数据整体下移一格解决 ...
hssfworkbook 单元格合并后宽度不生效_Excel表格“假”合并，有多牛？
在Excel表格中,你可以把多个单元格合并成一个单元格: 合并单元格只会保留左上角的单元格内容,为了证明这一点,你可以取消合并. 正是合并单元格这个只保留一个的特点,造成了表格后续的很多麻烦. 表格无 ...
表格内容相同单元格合并
//表格内容相同单元格合并 colIdx列索引 jQuery.fn.rowspan = function(colIdx) { //封装的一个JQuery小插件return this.each(func ...
JAVA通过poi实现excel表格制作并且将图片放入到指定的单元格中（可以循环插入）
废话不多说,直接上代码,上效果图 @RestController @Api(tags = "报表") @RequestMapping("/export") @C ...

html怎么让表格连接数据库,【前端】如何将html的table空白单元格合并？数据是循环从数据库里面读取的。...

html怎么让表格连接数据库,【前端】如何将html的table空白单元格合并？数据是循环从数据库里面读取的。...相关推荐

最新文章

热门文章