Vue实现table合并相同列

1、在vue页面methods定义方法

methods: {

flitterData () {

const spanOneArr = []

let concatOne = 0

// 循环后端查询出来的数据(tableData)，这里直接在data()中定义好了

this.tableData.forEach((item, index) => {

if (index === 0) {

spanOneArr.push(1)

} else {

// 需合并相同内容的字段，根据id判断，将id相同的name、classname合并

if (item.id === this.tableData[index - 1].id) {

spanOneArr[concatOne] += 1

spanOneArr.push(0)

} else {

spanOneArr.push(1)

concatOne = index

}

}

})

return {

one: spanOneArr

}

},

objectSpanMethod ({ row, column, rowIndex, columnIndex }) {

// 判断是否是第一、二列，如果是就将第一、二列相同字段进行合并

if (columnIndex === 0 || columnIndex === 1) {

// this.tableData 修改

const _row = (this.flitterData(this.tableData).one)[rowIndex]

const _col = _row > 0 ? 1 : 0

return {

rowspan: _row,

colspan: _col

}

}

}

}

2、在vue页面定义data

data () {

return {

// 接收后端传值数据

tableData: []

}

}

3、在vue页面定义table

标签中用 span-method引用定义的objectSpanMethod方法

ref="projectTable"

v-loading="loading"

:data="tableData"

:span-method="objectSpanMethod"

border

:header-cell-style="{color: 'black',fontWeight: 'bold',textAlign: 'center'}"

:cell-style="{ textAlign: 'center' }"

height="590px">

完整代码：

效果图：