html合并两个表格数据库,如何将html的table空白单元格合并？数据是循环从数据库里面读取的。...

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

{{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()

},

}